页面幻灯效果在各个平台经常使用， 尤其是左右滑动尤为常见，这里分享一个实例供大家参考
核心点：
通过改变索引序号的大小实现左移或者右移
$(".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){ //最后一个结束时，先把第一个克隆到最后一份，待移动效果结束，再移除同时迅速移到第一个
$(".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){//到了最左边时，先把最后一个克隆到第一份， 待移动效果结束，再移除，同时移动到最后一个
$(".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");
})
})下载文件：
