Jquery和纯JS实现轮播图（二）--淡入淡出切换式

之前有写过一篇轮播图，是左右切换式的，可以参考 Jquery和纯JS实现轮播图（一）–左右切换式
今天分享一下淡入淡出式的轮播图，同样也是用纯js和Jquery两种方法来实现：
JQUERY实现
HTML结构：

<div id="ads">    <img src="./images/img1.jpg" alt="" class="show" />    <img src="./images/img2.jpg" alt="" />    <img src="./images/img3.jpg" alt="" />    <img src="./images/img4.jpg" alt="" />    <img src="./images/img5.jpg" alt="" />    <img src="./images/img6.jpg" alt="" />    <ul>        <li class="active"></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div>

CSS代码：

ul{ list-style: none; }*{ margin: 0;padding: 0; }#ads{    width: 590px; height: 250px;    border: 15px solid #999;    margin: 20px auto;    position: relative;}#ads img{    width: 100%; height: 100%;    position: absolute;    left: 0; top: 0;    display: none;}#ads img.show{ display: block; }#ads ul{    position: absolute;    bottom: 10px; left: 240px; }#ads ul li{    width: 12px; height: 12px;    float: left;    background: rgba(255,255,255,0.7);    margin-right: 8px;    border-radius: 50%;    cursor: pointer;}#ads ul li.active{ background: orange; }

JS代码：

$(function(){    var timer = null;    var cur = 0;    var len = $("#ads li").length;    //鼠标滑过容器停止播放    $("#ads").hover(function(){        clearInterval(timer);    },function(){        showImg();    });    // 遍历所有圆点导航实现划过切换至对应的图片    $("#ads li").click(function(){        clearInterval(timer);        cur = $(this).index();        $(this).addClass("active").siblings().removeClass("active");        $("#ads img").eq(cur).fadeIn(200).siblings("img").fadeOut(200);    });    //定义图片切换函数    function showImg(){        timer = setInterval(function(){            cur++;            if( cur>=len ){ cur=0; }            $("#ads img").eq( cur ).fadeIn(200).siblings("img").fadeOut(200);            $("#ads li ").eq( cur ).addClass("active").siblings().removeClass("active");        },1000);    }    showImg();});

纯JS实现
html代码同上；
CSS代码：

ul{ list-style: none; }*{ margin: 0;padding: 0; }#ads{    width: 590px; height: 250px;    border: 15px solid #999;    margin: 20px auto;    position: relative;}#ads img{    width: 100%; height: 100%;    position: absolute;    left: 0; top: 0;    opacity: 0;    animation-timing-function: linear;    animation-duration:0.5s;    animation-fill-mode:forwards;}#ads img.show{    animation-name: show;}#ads img.unshow{    animation-name: disapper;}#ads ul{    position: absolute;    bottom: 10px; left: 240px; }#ads ul li{    width: 12px; height: 12px;    float: left;    background: rgba(255,255,255,0.7);    margin-right: 8px;    border-radius: 50%;    cursor: pointer;}#ads ul li.active{ background: orange; }@keyframes show{    from{opacity;}    to{opacity:1;}}@keyframes disappear{    from{opacity:1;}    to{opacity:0;}}

JS代码：

window.onload = function(){    var ads = document.getElementById("ads");    var imgs = ads.getElementsByTagName("img");    var lits = ads.getElementsByTagName("li");    var timer = null;    var cur = 0;    var len = lits.length;    // 定义并调用自动播放函数    timer = setInterval( autoPlay,1000 );    //鼠标滑过容器停止播放    ads.onmouseover = function(){        clearInterval( timer );    }    // 鼠标离开容器时继续播放下一张    ads.onmouseout = function(){        timer = setInterval( autoPlay,1000 );    }    // 遍历所有圆点导航实现划过切换至对应的图片    for( var i =0; i<len; i++ ){        (function(j){            lits[j].onclick = function(){                changePic(j);                cur = j;            }        })(i);    }    function autoPlay(){        cur++;        if( cur>=len ){ cur = 0 }        changePic( cur );    }    // 定义图片切换函数    function changePic( curIndex ){        for( var i= 0;i<len;i++ ){            imgs[i].className = "unshow";            lits[i].className="";        }        imgs[curIndex].className = "show";        lits[curIndex].className = "active";    }}