jquery picture Carousel Implementation and Encapsulation (i) _jquery

The use of object-oriented do-it-Yourself write a packaged jquery Carousel object, to meet the general requirements, need to use only call this object of the Carousel method.

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

The specific code is as follows:

HTML structure:

<div class= "banner" id= "J_bg_ban" >
<ul>
<li><a href= "#" ></a></li> <li><a href= ">< /a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<LI>&L T;a href= "#" ></a></li>
</ul>
<div class= "Indicator" id= "J_bg_indicator" >
</div>
<div class= "ban-btn clearfloat" id= "j_bg_btn" >
<a class= "Next-btn fr" href= javascript: >></a><a class= "prev-btn fl" href= "javascript:" > <</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 index Hasstarted:false,//whether to start the Carousel Interval:null,//Timer liitems:null,//
  The set of LI elements to be len:0, the length of the//liitems abox:null,////The DOM object containing the indicator Bbox:null,////The DOM object containing the front and back buttons/** * initialization and control functions * @param bannnerbox string contains the ID or class * of the entire Carousel box @param abox string contains the ID of the box for the indicator or class * @param btnbox string containing the front and rear buttons of the box
  ID or class */Startplay: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 graphs, and let the first indicator be active, hiding the front and rear button this.liItems.first (' Li '). css ({' Opacity ': 1, ' Z-index ': 1}).
  Siblings (' 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 (); Mouse move intoWhen banner the graph, stop the carousel and display the front and rear buttons, move out and 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 ') is continued to play when it is removed. 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 the Carousel This.start ()},//Previous function prev:function () {var out = This.now;
  This.now = (--this.now + this.len)% This.len;
 This.play (out, This.now);
  },//The latter function next:function () {var out = This.now;
  This.now = ++this.now% This.len;
 This.play (out, This.now); /** * Play function * @param out number The index value of the picture to disappear * @param now number the index value of the graph to be carousel * * Play:function (out){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 function start:function () {if (!this.hasstarted) {this.hasstarted = true;
   var that = 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 ');}

The initial implementation of a process-oriented approach to complete, although you can achieve the desired effect, but the code reusability is not high, you need to the page for each of the need for the rotation of the module to write the corresponding function. After encapsulation, do not need to write too much code, use just call Carsouel Startplay method and pass in three parameters, greatly improve the usability.

However, the flaw in the current code is also very obvious, that is, when more than one carousel on a page requires a carousel, only the last one will work, because there is only one Carsouel object, you can solve the problem by copying the Carsouel object, 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 can satisfy the requirements, but each call will replicate a new object, not only affect performance, the Carsouel object within the method can not be reused, so it needs further improvement.

To allow multiple rotations to use the Carsouel object at the same time, and to reuse functions within the Carsouel object, the Carsouel object must be used as a constructor or prototype object and instantiated every time it is needed, which satisfies the need for multiple rotations to be used concurrently. Maximize function reuse at the same time. I will address this issue in subsequent articles, and welcome attention or offer guidance.

I am a JavaScript beginner, this is my first dispatch, for the above problems I will continue to work hard to find the best solution. Thank you for watching. Give yourself a pep talk.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.