闲来无事，继续封装。此次封装的为水平滚轴组件，可选择滚动的距离大小。闲话不多说，直接上图。
参数说明：
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"></span> ???<span class="next-scroll iconfont"></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的水平滚轴组件，多参数可设置。
原文地址：http://www.cnblogs.com/pomelott/p/7482421.html