jquery-based horizontal roller assembly, multi-parameter can be set.

Nothing to do, continue to encapsulate. This package is a horizontal roller assembly, which allows you to choose the size of the scroll distance. Gossip not much to say, directly.

Parameter description:

Vis:4 the number of actual Li in the middle area
Scroll:4 the number of Li each roll over, if greater than vis, then take the remainder of Scroll%vis
Wrap: ". Scroll-main ul" Wrap layer selector in the middle area
Item: ". Scroll-main ul Li", the selector for each Li in the middle area
Btnpre: ". Pre-scroll" selector for left roll button
Btnnext: ". Next-scroll" selector for right-roll button

The HTML is as follows:

<Divclass= "Scroll-banner">    <spanclass= "Pre-scroll Iconfont">& #xe602;</span>    <spanclass= "Next-scroll Iconfont">& #xe601;</span>    <Divclass= "Scroll-main">        <ul>            <Li><ahref="#"><imgsrc= "Images/scroll-pic.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic2.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic3.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic4.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic2.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic4.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic.jpg"></a></Li>            <Li><ahref="#"><imgsrc= "Images/scroll-pic2.jpg"></a></Li>        </ul>    </Div></Div>

The CSS is as follows:

. 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: -;cursor:Pointer;font-size:40px;}. Pre-scroll{ Left:10px;}. Next-scroll{ Right:10px;}

JS as follows:

functionScrollbanner (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; varitemnum=$ (_this.set.item). length; varitemw=$ (_this.set.item). Outerwidth (); $ (_this.set.wrap). css ({"width": itemnum*itemw+ "px"}) $ (_this.set.btnpre). EQ (0). Click (function(){        varNowl=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(){        varNowl=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"})        }    })}//calledNewScrollbanner ({scroll:2});

jquery-based horizontal roller assembly, multi-parameter can be set.