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";

    }

}

来源：CSDN

作者：NINE-NINE

链接：https://blog.csdn.net/m0_38099607/article/details/72236493