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<Divclass= "banner"ID= "J_bg_ban">2<ul>3<Li><ahref="#"><imgsrc= "Banner_04.jpg"alt= "ad map/></a></li> 4 <li><a href="#"><imgsrc= "Banner_04.jpg"alt= "ad map/></a></li> 5 <li><a href="#"><imgsrc= "Banner_03.jpg"alt= "ad map"/></a></Li>6<Li><ahref="#"><imgsrc= "Banner_04.jpg"alt= "ad map"/></a></Li>7<Li><ahref="#"><imgsrc= "Banner_05.jpg"alt= "ad map"/></a></Li>8</ul>9<Divclass= "indicator"ID= "J_bg_indicator">Ten</Div> One<Divclass= "Ban-btn clearfloat"ID= "J_bg_btn"> A<aclass= "Next-btn fr"href= "javascript:">&gt;</a><aclass= "prev-btn fl"href= "javascript:">&lt;</a> -</Div> -</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 indexHasstarted:false,//whether to start the carouselInterval:NULL,//TimerLiitems:NULL,//collection of LI elements to be carousellen:0,//Length of LiitemsAbox:NULL,//DOM object containing the indicatorBBox:NULL,//DOM object with front and back buttons    /** initialization and control function * @param bannnerbox string containing the ID of the entire Carousel box or class * @param abox string containing the indicator's ID or class * @ Param Btnbox string contains the ID or class of the box with the front and back buttons*/Startplay:function(bannnerbox,abox,btnbox) {//Initializing Object Parameters        varthat = 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 have the first indicator active, hiding the front and back buttons         This. Liitems.first (' Li '). css ({' Opacity ': 1, ' Z-index ': 1}). Siblings (' Li '). css ({' opacity ': 0, ' Z-index ': 0}); varADom = ' ';  for(vari = 0; I < This. Len; i++) {ADom+ = ' <a></a> '; } $ (ADom). AppendTo ( This. Abox);  This. Abox.find (' A:first '). addclass ("Imgnum-active");  This. Bbox.hide (); //when the mouse moves into the banner diagram, stop the carousel and display the front and rear buttons, and then 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 when it moves out, it continues playing         This. Abox.find (' a '). Hover (function() {that.stop (); varout = 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 buttons to display the previous or next one$ (Btnbox). Find (' A:first '). Click (function() {that.next ()}); $ (Btnbox). Find (' A:last '). Click (function() {That.prev ()}); //Start Carousel         This. Start ()},//Previous functionPrev:function (){        varout = This. Now;  This. Now = (-- This. Now + This. Len)% This. Len;  This. Play (Out, This. Now); },    //Next functionNext:function (){        varout = 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 the index value of the graph to be carousel*/Play:function(out, now) { This. Liitems.eq (out). 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 functionStart:function(){        if(! This. hasstarted) {             This. hasstarted =true; varthat = This;  This. Interval = SetInterval (function() {that.next (); },2000); }    },    //Stop functionSTOP: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.

I am a beginner of JavaScript, this is my first posting, I will continue to work on the above issues and seek the best solution. Thank you for watching. Tell yourself a cheer.

jquery Pictures Carousel (i) Carousel implementation and encapsulation