頁面幻燈效果在各個(gè)平臺(tái)經(jīng)常使用， 尤其是左右滑動(dòng)尤為常見，這里分享一個(gè)實(shí)例供大家參考
核心點(diǎn)：
通過改變索引序號(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");
})
})下載文件：
