JQuery實作圖檔輪播滾動效果

原理（參考網上資料）：設定一個定時器，使圖檔清單在每隔一段時間後滾動一次。而循環效果，就是在每一滾動的時候，将第一張圖檔放到最後一張的後面(for循環來控制圖檔的換位操作)。

效果：圖檔從右往左依次滑動

html（輪播内容從背景接口讀取然後添加到<ul></ul>中）

<div class="project-tracking" id="tracking">
    <p class="tip">
        <span>注：報名後請一定在Hackathon活動專區釋出您的項目案例，否則視為放棄參賽。</span>
        <a id="js-link" href="javascript:;" target="_blank" rel="external nofollow" >檢視更多></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());
        }
    });
}