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

﹏ヽ暗。殇╰゛Y 2022-06-16 13:00 486阅读 0赞

之前有写过一篇轮播图，是左右切换式的，可以参考[ Jquery和纯JS实现轮播图（一）–左右切换式][Jquery_JS]  
今天分享一下淡入淡出式的轮播图，同样也是用纯js和Jquery两种方法来实现：  
**JQUERY实现**  
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; 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代码：

[Jquery_JS]: http://blog.csdn.net/m0_38099607/article/details/70903805