本文详细介绍如何使用JavaScript实现图片自动轮播及鼠标悬停时导航索引变色的功能。核心逻辑包括获取图片对象数组、利用setInterval设置间歇定时器控制显示隐藏，以及通过鼠标事件监听清除或重启定时器。同时解析了导航元素索引与数组下标减一匹配的变色原理，提供完整代码参考。
JavaScript图片轮播与索引变色实现
以下直接展示实现该功能的完整代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tupian{ width:290px; height:160px; border:#0F9 solid 1px}
.tp{ width:220px; height:160px; float:left}
.li{ margin-top:10px;list-style:none; border:#00F solid 1px; width:20px;}
</style>
</head>
<body>
<div id="tupian">
<div class="tp" onmouseover="sbfs()" onmouseout="jixu()"><img src="../../项目素材/图片/84372.jpg" /></div>
<div class="tp" onmouseover="sbfs()" onmouseout="jixu()" style="display:none" ><img src="../../项目素材/图片/84610.jpg" /></div>
<div class="tp" onmouseover="sbfs()" onmouseout="jixu()" style="display:none"><img src="file:///C|/Users/gaofangquan/Desktop/项目素材/图片/84246.jpg" /></div>
<div class="tp" onmouseover="sbfs()" onmouseout="jixu()" style="display:none"><img src="../../项目素材/图片/84639 (1).jpg" /></div>
<div id="xuanxiang" style="float:right; ">
<ul>
<li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">1</li>
<li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">2</li>
<li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">3</li>
<li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">4</li>
</ul>
</div>
</div>
</body>
<script type="text/jscript">
var aaaa=document.getElementsByClassName("tp")
var bbb=document.getElementsByClassName("li")
var index=0;
lunbo();
function lunbo(){
xianshi();
if( index<aaaa.length-1){
index++;}
else{index=0;}}
var a=window.setInterval("lunbo()",1000)
//图片与数列的背景同时变化
function xianshi(){
for( var i=0;i<aaaa.length;i++){
aaaa[i].style.display="none"
bbb[i].style.backgroundColor="white"}
aaaa[index].style.display="block"
bbb[index].style.backgroundColor="red"}
//鼠标放在数列上背景变色<br>function xz(n){
var b=document.getElementsByClassName("li")
for( var i=0; i<b.length; i++){
b[i].style.backgroundColor="white"}
n.style.backgroundColor="red"}
//当鼠标放到图片上的时候，图片停止轮播
function sbfs(){
window.clearInterval(a)}
//当鼠标离开图片的时候，轮播继续
function jixu(){
a=window.setInterval("lunbo()",1000);}
//鼠标放上，图片与相对应的li的值得索引显示出来
function xuanzhong(m){
var ccc=document.getElementsByClassName("tp")
index=m.innerHTML-1;// 因为m.innerhtml 获取的时数列li的值，比ccc的索引大1，所以应该减去1；
//把获取的值赋给index是因为如果重新定义一个变量的话，当鼠标离开li的时候，图片轮播的索引很乱，
for( var i=0;i<ccc.length;i++){
ccc[i].style.display="none"}
ccc[index].style.display="block"
window.clearInterval(a)}
//鼠标离开让图片自动切换
function shuzilikai(){
a=window.setInterval("lunbo()",1000)}
</script>
</html>首先，在JavaScript中获取所有图片元素并存储于数组中，同时定义一个变量用于记录当前图片的索引位置。
接着实现图片显示逻辑：先将所有图片隐藏，再根据当前索引显示对应图片，并将索引值加1。在定时器选择上，此处采用间歇定时器（setInterval）来实现自动切换效果。
为了实现鼠标交互，当鼠标悬停在图片区域时，调用window.clearInterval(a)清除定时器以停止轮播；当鼠标离开时，重新通过a=window.setInterval("lunbo()",1000)启动定时器。注意需将定时器句柄赋值给变量a，以便后续清除操作使用。
最后处理导航索引的变色效果：当鼠标悬停在特定导航项时，获取该导航项的文本值m.innerHTML，将其转换为数组索引（index=m.innerHTML-1）。由于导航列表的数值通常比数组下标大1，因此需减去1以匹配数组索引，并将该索引值赋给当前显示的图片，实现对应导航项的高亮变色。
上述内容即为JS图片轮播结合索引变色功能的完整实现方案，希望能为读者提供实用参考。如有任何疑问或需要进一步交流，欢迎留言反馈，小编将及时回复。感谢大家的支持与关注。