博客

如上图，JS实现简单幻灯片的原理解析：幻灯片按我的理解来说就是能够按顺序自动循环切换或者手动点击切换获得下标对应大图的特效。主要的方法就是：设置定时器，让大图每隔一段时间就切换一张，当切换到最后一张时进行判断，让下标回零重新循环切换。直接上代码解释吧。

var timer=null;
var now=0;  //定义一个变量，为当前幻灯片的索引值

//开启定时器，但一定记得开启之前先关闭所有定时器               
function auto(){
    clearInterval(timer);
    timer=setInterval(next,2000);
}
auto();

function next(){
    now++;
    tab();
}

function　tab(){
    //判断当前索引值如果大于或等于li的长度，说明已播放到了最后一张，让now=0重新开始播放
    if(now>=oOLi.length){
        now=0;
    }
    //now<0的情况出现在当前索引值为0，往左切换幻灯片的时候，此时应该让now的值为最后一张图的索引，即li.length-1
    else if(now<0){
        now=oOLi.length-1;
    }
    //这里用for循环改变当前li的类名，类似与选项卡
    for(var i=0;i<oOLi.length;i++){
        oOLi[i].className='';
    }
    oOLi[now].className='active';
    //运动函数，让ul每次运动-470*now的长度
    startMove(oUl,{left:-470*now});
}

for(var i=0;i<oOLi.length;i++){
    oOLi[i].index=i;
    oOLi[i].onmouseover=function(){
        now=this.index;
        tab();
    }
}
//鼠标经过关闭定时器和鼠标离开开启定时器
oBan.onmouseover=function(){
    clearInterval(timer);
}
oBan.onmouseout=function(){
    auto();
}
//鼠标点击左右切换幻灯片
oLeft.onclick=function(){
    clearInterval(timer);
    now--;
    tab();
    auto();
}

oRight.onclick=function(){
    clearInterval(timer);
    now++;
    tab();
    auto();
}