JQuery实现图片轮播滚动效果

原理（参考网上资料）：设置一个定时器，使图片列表在每隔一段时间后滚动一次。而循环效果，就是在每一滚动的时候，将第一张图片放到最后一张的后面(for循环来控制图片的换位操作)。

效果：图片从右往左依次滑动



html（轮播内容从后台接口读取然后添加到<ul></ul>中）

<div class="project-tracking" id="tracking">
<p class="tip">
<span>注：报名后请一定在Hackathon活动专区发布您的项目案例，否则视为放弃参赛。</span>
<a id="js-link" href="javascript:;">查看更多></a>
</p>
<div class="box">
<ul id="scroll_box">

</ul>
</div>
</div>

scss

.project-tracking{
height: 455px;
width: 100%;
background: url("../img/hackathon_08.jpg") no-repeat center top;
.tip{
width: 1190px;
text-align: center;
margin: auto;
box-sizing: border-box;
padding: 180px 40px 0;
font-size: 14px;
color: #c2d3d1;
span{
display: inline-block;
float: left;
}
a{
display: inline-block;
float: right;
}
}
.box{
width:1110px;
overflow:hidden;
height:230px;
margin: auto;
padding-top: 30px;
text-align: center;
#scroll_box{
li{
width:320px;
float:left;
height:100%;
margin-right: 75px;
a{
display: block;
width:320px;
height:100%;
overflow: hidden;
color: #fff;
font-size: 14px;
img{
width:320px;
height:200px;
}
span{
line-height: 30px;
}
}
}
}
}
}

js（轮播代码在scroll（），tip：每次从后台接口获取<li></li>后，要重新计算轮播的宽度）

var arr=[];//分类id

getCategoryId();//调用函数

//轮播
setInterval(scroll,time);

//活动页获取分类id

function getCategoryId(){
$.ajax({
url:API.getHackathonCategoryId,
type:"get",
}).done(function(res){
if(res.ok){
arr = res.result.split(',');
//获取活动页轮播列表
getRotationList(arr);
$("#js-link").attr('href', '/built/homeCase/case.html?categoryId='+arr[0]+'&orderBy=createTime')
}else{
Util.alertMessage(res.errorMessage ||'出错啦！');
}
});
}

//获取活动页轮播列表

function getRotationList(arr){
var rotationList;
$.ajax({
url:API.getHackathonByList,
type:"get",
data:{
categoryId1:arr[0],
categoryId2:arr[1],
orderBy:"createTime",
},
}).done(function(res){
if(res.ok ){
if(res.result.rows&& res.result.rows.length > 0){
rotationList = res.result.rows;
rotationList.forEach(function(item, i){
$("#scroll_box").append("<li><a href='/built/case-detail/art_detail.html?articleId="+item.caseId + "'><img src='"+item.caseImage+"' alt=''/>"+item.caseTitle+"</a></li>");
})
//重新计算轮播宽度
var length = $("#scroll_box li").length;
var liWidth = $("#scroll_box li").outerWidth(true);
$("#scroll_box").css("width",length * liWidth);

}
}else{
Util.alertMessage(res.errorMessage ||'出错啦！');
}
});
}

//轮播

var length = $("#scroll_box li").length;
var liWidth = $("#scroll_box li").outerWidth(true);
//var boxWidth = $(".box").outerWidth(true);
//var showLength = Math.ceil(boxWidth / liWidth); //显示图片个数
var speed = 1000;   //滚动速度
var time = 2500;    //滚动间隔
var scrollIndex = 1;    //每次滚动的图片数量
$("#scroll_box").css("width",length * liWidth);     //设置滚动盒子宽度
//不滚动
function scroll(){
if( length<=3) {
return;
}
$("#scroll_box").stop().animate({"margin-left":"-"+scrollIndex*liWidth+"px"},speed,function(){
$("#scroll_box").css("margin-left",0);
for(var i =0;i < scrollIndex;i++){
//将第一张图片放到最后一张图片后面
$("#scroll_box").find("li").last().after($("#scroll_box").find("li").first());
}
});
}