基于jquery的水平滚轴组件，多参数可设置。

闲来无事，继续封装。此次封装的为水平滚轴组件，可选择滚动的距离大小。闲话不多说，直接上图。

参数说明：

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
});