之前有寫過一篇輪播圖，是左右切換式的，可以參考 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";

    }

}