淡入淡出的轮播图

荒废了两个月，联连轮播图都快忘记怎么写了，特别来记录一下，方便以后使用。

淡入淡出轮播图 原生JS写法（原理就是 溢出隐藏 ul li定位在一起，opacity 设为0）

 

css

.banner{
    width: 1200px;
    height: 600px;
    overflow: hidden;
    margin: 100px auto;
    position: relative;
}

   .img-list li{

    position: absolute;
    opacity: 0;
    transition: all .5s;
}

html结构代码

<div class="banner">
    <ul class="img-list">
        <li class="on"><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
    </ul>
    <ul class="btn-list">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <a href="javascript:void(0)" class="myleft"><</a>
    <a href="javascript:void(0)" class="myright">></a>
</div>

JS代码

//展示对应的索引值num的图片
    function show(num){
         for(var i=0;i<list_li.length;i++){
             if(i==num){
                 list_li[num].className='on';
                 btn_list_li[num].className='on';
             }else{
                 list_li[i].className='';
                 btn_list_li[i].className='';
             }
         }
     }

/*按钮点击事件*/
for(var i=0;i<btn_list_li.length;i++){
/*添加闭包 防止变量丢失*/
    (function(index){
        btn_list_li[index].onclick=function(){
            show(index);
            num=index;
        }
    })(i)
}
myleft.onclick=function(){
    num--;
    if(num<0){
        num=btn_list_li.length-1;
    }
    show(num)
};

myright.onclick=function(){
    num++;
    if(num>(btn_list_li.length-1)){
        num=0;
    }
    show(num);
}
/*自动播放*/
    function play(){
        num++;
        if(num>(btn_list_li.length-1)){
            num=0;
        }
        show(num);
    }
    var timer=setInterval(function(){
        play();
    },2000);

    /*自动播放开关*/
var banner=document.getElementsByClassName('banner')[0];
    banner.onmouseover=function(){
    clearInterval(timer);
};
banner.onmouseout=function(){
    timer=setInterval(function(){
        play();
    },2000);
}