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);  
            $("#jslink").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());
        }
    });
}