幻灯片切换的案例中，如果不存在缩略图或者导航的小点点，一般只需要下标值的改变即可。

如果存在两组数据，而且数据之间必须有一一对应的关系时，就要依赖自定义属性的方法来传递各自的下标值了。

这个案例有两个版本。

第一个版本没有封装成函数，缩略图的active高亮效果的改变，是用点击下一个，去掉上一个有active的方式精准实现的。

第二个版本把图片的切换封装成了函数，缩略图的active高亮效果，用的是先把所有li的active效果去掉，再为当前被点击的li添加active完成。

该案例的核心依然是数组和自定义属性的应用。

功能有：

1、点击缩略图或者鼠标经过缩略图，缩略图有active高亮状态，同时切换对应的大图。

2、随着图片的变化，图片的统计数字和标题发生对应的变化。

效果如下：

第一个版本：

页面效果点击查看

一、html代码

<div id="banner">
    <span>图片数量</span>
<h3>图片标题</h3>
<img src="images/loading.gif"/>
<ul id="nav">
    
</ul>
</div>

二、css代码

body,ul,h3{
    margin:0;
    padding:0;
    }
body{
    font:1em "microsoft Yahei";
    color:#333;
    background:#eee;}
li{
    list-style:none;}
h3{
    font-weight:normal;
    }   
#banner{
    position:relative;
    width:600px;
    height:375px;
    margin:30px auto;
    text-align:center;
    background-color:#FFF1CE;}
#banner span,#banner h3,#nav{
    position:absolute;
    color:#fff;}
#banner span{
    right:20px;
    top:10px;}
#banner h3{
    bottom:20px;
    left:20px;}
#nav{
    right:-114px;
    top:0;
    }
#nav li{
    width:104px;
    height:65px;
    margin-bottom:10px;
    background-color:#ddd;
    opacity:.6;
    }
#nav li.active{
    opacity:1;}

三、js代码

window.onload=function(){
    var oBanner=document.getElementById("banner");
    var oSpan=oBanner.getElementsByTagName("span")[0];
    var oTitle=oBanner.getElementsByTagName("h3")[0];
    var oImg=oBanner.getElementsByTagName("img")[0];
    var oUl=document.getElementById("nav");
    var oLi=oUl.getElementsByTagName("li");
    var oldLi=null; //设置一个变量存放上一个li对象。
    
    
    var arrUrl=["images/org/1.jpg","images/org/2.jpg","images/org/3.jpg","images/org/4.jpg","images/org/5.jpg"];
    var arrTitle=["美味蛋糕","萌宠狗狗","落日海面","雨中蜻蜓","娘娘"];
    var arrLi=["images/slt/1.jpg","images/slt/2.jpg","images/slt/3.jpg","images/slt/4.jpg","images/slt/5.jpg"];
    
    for(var i=0;i<arrLi.length;i++){
        oUl.innerHTML+="<li><img src='"+arrLi[i]+"'></li>";
        }
        
    //初始化
    var num=0;
    oSpan.innerHTML=(num+1)+"/"+arrUrl.length;
    oTitle.innerHTML=arrTitle[num];
    oImg.src=arrUrl[num];
    oLi[num].className="active";
    oldLi=oLi[num]; //初始化的这个li就有active高亮状态的li。
    
    //点击事件
    
    for(var i=0;i<oLi.length;i++){
        oLi[i].index=i; //保存索引值
        oLi[i].onclick=function(){
            oSpan.innerHTML=this.index+1+"/"+arrUrl.length;
            oTitle.innerHTML=arrTitle[this.index];
            oImg.src=arrUrl[this.index];
            //li的active的添加有两个思路，一种全部清空，再添加
            /*for(var i=0;i<oLi.length;i++){
                oLi[i].className="";
                }
            this.className="active";*/
            
            //清空上一个，再当前添加
            oldLi.className="";
            oldLi=this;//把当前的li更新进oldLi，确保下一次单击的时候能把上一次的li的active高亮去掉。
            this.className="active";
            }
        
        }
}

第二个函数版本：

具体效果点击查看。

html和css和前面案例一样。

一、js代码

window.onload=function(){
var oBanner=document.getElementById("banner");
var oSpan=oBanner.getElementsByTagName("span")[0];
var oTitle=oBanner.getElementsByTagName("h3")[0];
var oImg=oBanner.getElementsByTagName("img")[0];
var oUl=document.getElementById("nav");
var oLi=oUl.getElementsByTagName("li");

//数组数据
var arrUrl=["images/org/1.jpg","images/org/2.jpg","images/org/3.jpg","images/org/4.jpg","images/org/5.jpg"];
var arrTitle=["美味蛋糕","萌宠狗狗","落日海面","雨中蜻蜓","娘娘"];
var arrLi=["images/slt/1.jpg","images/slt/2.jpg","images/slt/3.jpg","images/slt/4.jpg","images/slt/5.jpg"];

//生成li
for(var i=0;i<arrLi.length;i++){
    oUl.innerHTML+="<li><img src='"+arrLi[i]+"'></li>";
    }
    
//初始化
var num=0;
fnTab();

//点击事件
for(var i=0;i<oLi.length;i++){
    oLi[i].index=i; //保存索引值
    oLi[i].onmouseover=function(){ //鼠标经过
        num=this.index;
        fnTab();
        }
    }
    
    
//切换函数  
function fnTab(){
    oSpan.innerHTML=(num+1)+"/"+arrUrl.length;
    oTitle.innerHTML=arrTitle[num];
    oImg.src=arrUrl[num];
    //把所有缩略图的active高亮去掉
    for(var i=0;i<oLi.length;i++){
        oLi[i].className="";
        }
    //再为当前被点击的li添加active高亮状态
    oLi[num].className="active";
}
}

案例下载地址：

链接: https://pan.baidu.com/s/1eYw5Jd9Pq0Ix52xmZDQ7xw 提取码: mvxv