亚洲色蝴蝶中文娱乐网,在线亚洲欧美一区二区中文字幕,无人视频在线观看视频高清视频,99午夜国产精品一区二区,人人妻人人爽人人狠狠

頁(yè)面幻燈效果在各個(gè)平臺(tái)經(jīng)常使用， 尤其是左右滑動(dòng)尤為常見(jiàn)，這里分享一個(gè)實(shí)例供大家參考

核心點(diǎn)： 

通過(guò)改變索引序號(hào)的大小實(shí)現(xiàn)左移或者右移

$(".slides > ul").finish().animate({left:nowIndex*-li_width},1000);

效果如下：

HTML代碼：

 <div class="slides">
        <ul>
            <li class="green">
                1
            </li>
            <li class="orange">
                2
            </li>
            <li class="red">
                3
            </li>
        </ul>
        <a href="javascript:;" class="left"> < </a>
        <a href="javascript:;" class="right"> > </a>
     </div>

CSS代碼：

*{
    padding:0;
    margin:0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
img{
    vertical-align: top;
    border: none;
}
body{
    font-size: 14px;
    font-family: '微軟雅黑';
}

.slides{
    width: 300px;
    height: 250px;
    position: relative;
    margin: 50px auto;
    overflow: hidden;
}

.slides > ul{
    position: absolute;
    width: max-content;
    background-color: antiquewhite;
}

.slides > ul > li{
    float: left;
    width: 300px;
    height: 250px;
    line-height: 250px;
    color:#fff;
    font-size: 50px;
    text-align: center;
}
.slides > ul > li.green{
    background-color: green;
}
.slides > ul > li.red{
    background-color: red;
}
.slides > ul > li.orange{
    background-color: orange;
}



.slides .left,.slides .right{
    position: absolute;
    top: 170px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
}
.slides .left{
    left:10px;
}
.slides .right{
    right: 10px;
}

JS代碼：

  $(function(){
            let nowIndex = 0
            let li_width = $(".slides > ul > li").width()
            let nums = $(".slides > ul > li").length
            function slide(dircetion = "left"){
                dircetion == "left" ? nowIndex++ : nowIndex--
                if(nowIndex === nums){ //最后一個(gè)結(jié)束時(shí)，先把第一個(gè)克隆到最后一份，待移動(dòng)效果結(jié)束，再移除同時(shí)迅速移到第一個(gè)
                    $(".slides > ul > li").first().clone().appendTo($(".slides > ul"));
                    $(".slides > ul").finish().animate({left:nowIndex*-li_width},1000,function(){
                        $(".slides > ul > li").last().remove();
                        $(".slides > ul").css({left:0});
                        nowIndex = 0;                        
                    })
                }else if(nowIndex == -1){//到了最左邊時(shí)，先把最后一個(gè)克隆到第一份， 待移動(dòng)效果結(jié)束，再移除，同時(shí)移動(dòng)到最后一個(gè)
                    $(".slides > ul > li").last().clone().prependTo($(".slides > ul"));
                    $(".slides > ul").css({left:-li_width});
                    $(".slides > ul").finish().animate({left:0},1000,function(){
                        $(".slides > ul > li").first().remove();
                        nowIndex = nums-1;
                        $(".slides > ul").css({left:nowIndex*-li_width});
                    })
                }
                else{
                    $(".slides > ul").finish().animate({left:nowIndex*-li_width},1000);
                   
                }
                console.log('left值',nowIndex*-li_width, 'nowIndex值',nowIndex);
            }
            $(".left").click(function(){ //查看左邊的圖片
                slide("right");
            })

            $(".right").click(function(){ //查看右邊圖片
                slide("left");
            })
        })

下載文件：

滑動(dòng)幻燈片.zip