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

標籤：mat   技術分享   abs   div   font   分享   set   ima   中間   

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

參數說明：

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的水平滾軸組件，多參數可設定。