jquery Pictures Carousel (i) Carousel implementation and encapsulation

Using object-oriented to write a packaged jquery Carousel object, to meet the general requirements, need to use only call this object's Carousel method.

Demo:https://github.com/zsqosos/shopweb

The specific code is as follows:

HTML structure:

1 <div class= "banner" id= "J_bg_ban" > 2 <ul> 3 <li><a href= "#" ></a></li> 4 <li><a href=" # "></a>& Lt;/li> 5 <li><a href= "#" ></a></li> 6 <li& Gt;<a href= "#" ></a></li> 7 <li><a href= "#" >& Lt;img src= "banner_05.jpg" alt= "ad map"/></a></li> 8 </ul> 9 <div class= "indicator" id= "J_bg_indi Cator ">10 </div>11 <div class=" ban-btn clearfloat "id=" j_bg_btn ">12 <a class=" next-btn fr "href= "javascript:" >&gt;</a><a class= "prev-btn fl" href= "javascript:" >&lt;</a>13 </div >14 </div>

CSS style:

. banner {    height:325px;    width:812px;    position:relative;    Overflow:hidden;}. Banner ul li{    Position:absolute;
top:0;
left:0;}. Banner ul Li img{    height:325px;    width:812px;    Display:block;}. ban-btn{    width:100%;    Position:absolute;    top:136px;    Z-index:2;}. BAN-BTN a{    Display:inline-block;    height:60px;    width:35px;    Background:rgba (180,180,180,0.5);    font-size:25px;    Text-align:center;    line-height:60px;    Color: #fff;}. BAN-BTN a:hover{    Background:rgba (100,100,100,0.5);}. indicator{    width:100%;    Position:absolute;    Text-align:center;    bottom:15px;    Z-index:2;}. Indicator a{    display:inline-block;    width:20px;    height:5px;    margin:0 3px;    Background: #fff;}. indicator-active{    background: #FF8C00!important;}

jquery Code:

$.carousel = {now:0,////The currently displayed picture index Hasstarted:false,//whether to start the Carousel Interval:null,                Timer Liitems:null,//set of LI elements to be carousel len:0,//liitems length abox:null,  Dom object containing indicator Bbox:null,//DOM object containing front and back buttons/** * Initialization and control function * @param bannnerbox string The ID of the box containing the entire carousel or class * @param abox string containing the indicator's ID or class * @param btnbox string containing the front and back buttons of the box ID or class */ST        Artplay:function (Bannnerbox,abox,btnbox) {//Initialize object parameter var that = this;        This.liitems = $ (bannnerbox). Find (' ul '). Find (' Li ');        This.len = This.liItems.length;        This.abox = $ (bannnerbox). Find (Abox);        This.bbox = $ (bannnerbox). Find (Btnbox); Let the first picture Show, dynamically create an indicator based on the number of carousel plots, and leave the first indicator active, hiding the front and back button This.liItems.first (' Li '). css ({' Opacity ': 1, ' Z-index ': 1}). Sibling        S (' Li '). css ({' opacity ': 0, ' Z-index ': 0});        var aDom = '; for (var i = 0; i < This.len; i++) {ADom + = ' <a></a> ';        } $ (ADom). AppendTo (This.abox);        This.aBox.find (' A:first '). addclass ("imgnum-active");        This.bBox.hide ();            When you move the mouse over the banner diagram, stop the carousel and display the front and back buttons, and move out to start the carousel and hide the front and rear buttons $ (bannnerbox). Hover (function () {that.stop ();        That.bBox.fadeIn (200);            }, Function () {That.start ();        That.bBox.fadeOut (200);        });            When the mouse moves into the indicator, the corresponding picture is displayed, and the This.aBox.find (' a ') continues to play when it is moved out. Hover (function () {that.stop ();            var out = That.aBox.find (' a '). Filter ('. Indicator-active '). index ();            That.now = $ (this). index ();        if (Out!=that.now) {That.play (out, That.now)}}, function () {That.start ();        });        Click the left and right button to display the previous or next $ (btnbox). Find (' A:first '). Click (function () {That.next ()});        $ (Btnbox). Find (' A:last '). Click (function () {That.prev ()}); Start Carousel This.start ()},//Previous function prev:functIon () {var out = This.now;        This.now = (--this.now + this.len)% This.len;    This.play (out, This.now);        },//After a function next:function () {var out = This.now;        This.now = ++this.now% This.len;    This.play (out, This.now); },/** * Play function * @param the index value of the picture that the out number is going to disappear * @param now number next to the index value of the graph to be carousel */play:function (ou T, now) {This.liItems.eq (off). Stop (). Animate ({opacity:0, ' z-index ': 0},500). End (). EQ (now). Stop (). Animate ({opacity        : 1, ' Z-index ': 1},500);    This.aBox.find (' a '). Removeclass (' imgnum-active '). EQ (now). addclass (' indicator-active ');            },//Start function start:function () {if (!this.hasstarted) {this.hasstarted = true;            var = this;            This.interval = setinterval (function () {that.next ();        },2000);        }},//Stop function stop:function () {clearinterval (this.interval);    this.hasstarted = false; }};

$ (function () {
$.carsouel.startplay (' #J_bg_bn ', ' #J_bg_indicator ', ' #J_bg_btn ');
})

Initially implemented using a process-oriented approach, although you can achieve the desired effect, but the code reusability is not high, you need to write each module on the page need to be carousel corresponding function. After encapsulation, do not need to write too much code, use only call Carsouel Startplay method and pass in three parameters, greatly improve the ease of use.

However, the current code flaw is also very obvious, that is, when there is more than one carousel on a page needs to be carousel, only the last one will work, this is because the Carsouel object only one, you can copy the Carsouel object to solve the problem, such as:

    var banner1 = $.extend (True,{},carousel);    var banner2 = $.extend (True,{},carousel);    var banner3 = $.extend (True,{},carousel);    Banner1.startplay (' #J_bg_ban1 ', ' #J_bg_indicator1 ', ' #J_bg_btn1 ');    Banner2.startplay (' #J_bg_ban2 ', ' #J_sm_indicator2 ', ' #J_bg_btn2 ');    Banner3.startplay (' #J_bg_ban3 ', ' #J_sm_indicator3 ', ' #J_bg_btn3 ');

This will satisfy the requirements, but each call will replicate a new object, not only affect performance, the methods within the Carsouel object can not be reused, so further improvements are needed.

To enable multiple rotations to use the Carsouel object at the same time, and to reuse functions inside the Carsouel object, you must use the Carsouel object as a constructor or prototype object, and instantiate it every time you need to, so that you can meet the requirements for simultaneous use of multiple carousel Maximize function reuse at the same time. I will address this issue in a follow-up article and welcome attention or guidance.

jquery Pictures Carousel (i) Carousel implementation and encapsulation