閑來無事，繼續封裝。此次封裝的為水平滾軸組件，可選擇滾動的距離大小。閑話不多說，直接上圖。

參數說明：

vis:4 中間區域可現實的 li 個數
scroll:4 每次滾過的li個數，若大於vis，則取 scroll%vis的余數
wrap:".scroll-main ul" 中間區域的包裹層選擇器
item:".scroll-main ul li", 中間區域每個li的選擇器
btnPre:".pre-scroll" 左滾按鈕的選擇器
btnNext:".next-scroll" 右滾按鈕的選擇器

html如下：

<div class="scroll-banner">
    <span class="pre-scroll iconfont">&#xe602;</span>
    <span class="next-scroll iconfont">&#xe601;</span>
    <div class="scroll-main">
        <ul>
            <li><a href="#"><img src="images/scroll-pic.jpg"
 
></a></li>
            <li><a href="#"><img src="images/scroll-pic2.jpg"></a></li>
            <li><a href="#"><img src="images/scroll-pic3.jpg"></a></li>
            <li><a href="#"><img src="images/scroll-pic4.jpg"
 
></a></li>
            <li><a href="#"><img src="images/scroll-pic.jpg"></a></li>
            <li><a href="#"><img src="images/scroll-pic2.jpg"></a></li>
            <li><a href="#"><img src="images/scroll-pic4.jpg"></a></li>
            <li><a href="#"><img src="images/scroll-pic.jpg"></a></li>
            <li><a href="#"><img src="images/scroll-pic2.jpg"></a></li>
        </ul>
    </div>
</div>

css如下：

 .scroll-banner{
     position:relative;
 }
.scroll-main{
    width:560px;
    margin:0 auto;
    overflow:hidden;
}
.scroll-main ul{
  overflow:hidden;
  position:relative;
  left:0px;
}
.scroll-main ul li{
  float:left;
  width:140px;
  height:120px;
  padding:0 10px;
}
.scroll-main ul li img{
    width:100%;
    height:100%;
}
.pre-scroll,
.next-scroll
{
    position: absolute;
    top:35px;
    color:#fff;
    z-index:100;
    cursor:pointer;
    font-size:40px;
}
.pre-scroll{
    left:10px;
}
.next-scroll{
    right:10px;
}

js如下:

function scrollBanner(obj){
    this.set={
        vis:4,
        scroll:4,
        wrap:".scroll-main ul",
        item:".scroll-main ul li",
        btnPre:".pre-scroll",
        btnNext:".next-scroll"
    }
    var _this=this;
    $.extend(this.set,obj)
    this.set.scroll=this.set.scroll>this.set.vis?this.set.scroll%this.set.vis:this.set.scroll;
    var itemNum=$(_this.set.item).length;
    var itemW=$(_this.set.item).outerWidth();
    $(_this.set.wrap).css({"width":itemNum*itemW+"px"})

    $(_this.set.btnPre).eq(0).click(function(){
        var nowL=parseInt($(_this.set.wrap).eq(0).css("left"))
        if(nowL>=0){
            $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":-(itemNum-_this.set.vis)*itemW+"px"})
        }else{
            $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":nowL+_this.set.scroll*itemW+"px"})
        }
        
    })
    $(_this.set.btnNext).eq(0).click(function(){
        var nowL=parseInt($(_this.set.wrap).eq(0).css("left"))
        if(nowL<=-(itemNum-_this.set.vis)*itemW){
            $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":"0px"})
        }else{
            $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":nowL-_this.set.scroll*itemW+"px"})
        }
    })
}



//調用
new scrollBanner({
    scroll:2
});

基於jquery的水平滾軸組件，多參數可設置。