Web picture carousel effect using jquery _jquery

First look at the effect:

That's what it means.

Carousel Effect Analysis:
The carousel effect can be divided into 3 parts: a carousel picture (a picture or a container), a button that controls the display of the carousel (the left and right buttons, an index button (for example, the number button at the top of the effect chart above)) that turns the carousel picture on and off at intervals.
The display of the Carousel graph: The Carousel map to display shows that the carousel map does not need to be shown hidden; These carousel images are often overlapped in a positioned manner, displaying a carousel picture at a time.
Control button: When the mouse clicks or moves to the index button above, displays the corresponding index position the carousel graph; the up and down buttons are responsible for controlling the display of the previous one, the next carousel picture.
Other: The General Index button has active state and inactive state altogether 2 kinds of States; When you move the mouse over the carousel picture, you should stop the automatic carousel and start the automatic carousel when the mouse leaves.

Carousel Effect Implementation Notes:
jquery provides a rich selector and a way to pick elements, which greatly simplifies our development, such as $ (". Slider-item"). Filter (". slider-item-selected") selects the index button that is currently active.
The switching display effect of two carousel graphs is realized through the fadeout () and Fadein () method of jquery, using the API with reference to jquery.
Implementation of the CSS transparent background: Background:rgba (0, 0, 0, 0.2); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr=# 33000000,endcolorstr= #33000000); (see below for information), compatible with most mainstream browsers including IE; why not use opacity? Because opacity makes text transparent (child elements are also transparent).
HTML skeletons are important, and the results you write in HTML should be good.

Code section:

Html:

<pre name= "code" class= "HTML" ><div class= "Slider" >

 <div class= "Slider-extra" >
 <ul class= "Slider-nav" >
  <li class= "Slider-item" >1</li>
  <li class= "Slider-item" >2</li >
  <li class= "Slider-item" >3</li>
  <li class= "Slider-item" >4</li>
 </ul >
 <div class= "Slider-page" >
  <a class= "Slider-pre" javascript:;; ><</a>
  <a class= "Slider-next" href= "javascript:;;" >></a>
 </div>
 </div>
</div>

Css:

* {padding:0px;
margin:0px;  } a {Text-decoration:none} ul {list-style:outside none none; Slider,. Slider-panel img,. Slider-extra {width:
 650px;
height:413px;
 }. slider {text-align:center;
 margin:30px Auto;
position:relative;
 }. Slider-panel, Slider-nav,. Slider-pre,. slider-next {position:absolute;
Z-index:8; }. Slider-panel {position:absolute}. slider-panel img {border:none}. Slider-extra {position:relative;}. Slid
 Er-nav {margin-left: -51px;
 Position:absolute;
 left:50%;
bottom:4px;
 }. Slider-nav Li {background: #3e3e3e;
 border-radius:50%;
 Color: #fff;
 Cursor:pointer;
 margin:0 2px;
 Overflow:hidden;
 Text-align:center;
 Display:inline-block;
 height:18px;
 line-height:18px;
width:18px;
 }. Slider-nav. slider-item-selected {background:blue; slider-page a{Background:rgba (0, 0, 0, 0.2);
 Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #33000000, endcolorstr= #33000000);
 Color: #fff; Text-aligN:center;
 Display:block;
 font-family: "SimSun";
 font-size:22px;
 width:28px;
 height:62px;
 line-height:62px;
 Margin-top: -31px;
 Position:absolute;
top:50%;
 }. slider-page a:hover {background:rgba (0, 0, 0, 0.4);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #66000000, endcolorstr= #66000000);
 }. slider-next {left:100%;
Margin-left: -28px;
 }

JavaScript:

$ (document). Ready (function () {var length, Currentindex = 0, interval, hasstarted = False,//whether has started the carousel T = 3000;/Carousel
 
 Time interval length = $ ('. Slider-panel '). length;
 Hide $ ('. Slider-panel:not (: First) ') except for picture One. Hide ();
 Set the first slider-item to the active state $ ('. Slider-item:first '). addclass (' slider-item-selected ');
 
 Hide forward, flip Back button $ ('. Slider-page '). Hide (); The mouse hangs forward, backward button, stop sliding, the mouse left hidden forward, backward button, start sliding $ ('. Slider-panel. Slider-pre,. Slider-next '). Hover (function () {Stop ()
 ;
 $ ('. Slider-page '). Show ();
 The function () {$ ('. Slider-page '). Hide ();
 Start ();
 
 });
 $ ('. Slider-item '). Hover (function (e) {stop ();
 var Preindex = $ (". Slider-item"). Filter (". slider-item-selected"). index ();
 Currentindex = $ (this). index ();
 Play (Preindex, currentindex);
 The function () {start ();
 
 });
 $ ('. Slider-pre '). Unbind (' click ');
 $ ('. Slider-pre '). Bind (' click ', function () {pre ();
 });
 $ ('. Slider-next '). Unbind (' click ');
 $ ('. Slider-next '). Bind (' click ', Function () {next ();
 
 }); /** * Page Forward * * Function pre (){var preindex = Currentindex;
 Currentindex = (--currentindex + length)% length;
 Play (Preindex, currentindex);
 /** * Page Backward/function next () {var preindex = Currentindex;
 Currentindex = ++currentindex% Length;
 Play (Preindex, currentindex); }/** * from Preindex page to currentindex page * Preindex integer, page start Page * Currentindex integer, turn to pages/function play (Preindex, Currentind
 Ex) {$ ('. Slider-panel '). EQ (preindex). fadeout. Parent (). Children (), EQ (currentindex). FadeIn (1000);
 $ ('. Slider-item '). Removeclass (' slider-item-selected ');
 $ ('. Slider-item '). EQ (currentindex). addclass (' slider-item-selected ');
  /** * Start the Carousel/function start () {if (!hasstarted) {hasstarted = true;
 Interval = SetInterval (next, T);
 }/** * Stop the carousel/function Stop () {clearinterval (interval);
 hasstarted = false;
Start the carousel start ();
 });

First is the initialization section: Hides the pictures that are unexpected except for the first carousel, and hides the forward and backward buttons, making the first index button active.
Event section: Binding the mouse over the hover () of jquery and event handling when left, jquery bind () method binding mouse Click event handling forward, backward flip,
Carousel Control: Pre (), next (), Play (), start () automatically carousel, stop () stop automatic carousel.
The above JS write more scattered, the structure is not too good, read it is also more laborious, not easy to use, coupling degree is high. The next article will give you a pure jquery Carousel plug-in that can customize the effects, ease of configuration, and scalability.

Here's the whole code:
Index.html

<! DOCTYPE html>  

So a simple jquery carousel effect is done, and there are plenty of things to improve on.

Using Plug-ins to implement
the above effect looks satisfactory, the only problem is: every time you need a carousel effect, copy and paste the code in the past, if some parts need to be modified (for example: the rotation of the animation effect, the previous use of the jquery fade effect, if changed to sliding effect, Inevitable to modify the JS code, then you need to modify the JS code, for me to write the jquery carousel effect of the JS code unfamiliar programmers, modify these JS is really difficult. One of the goals of a carousel plug-in is that it can be configured flexibly (not just the plug-ins in this article), but it's a good thing for programmers to write a small amount of code to achieve rich functionality. The HTML and CSS parts of this article will need to be written by the programmer, while the implementation of JS only needs a small amount of writing.
Here we use the Zslider plugin to open source on GitHub:
Github:https://github.com/ricciozhang/zslider_v1
Well, let's look at the code:

(Function ($, window, document) {//----Statics var default_animate_type = ' fade ', array_slice = [].slice, 
   
  Array_concat = [].concat; 
    ----Methods function ConcatArray () {var deep = false, result = []; 
    if (arguments.length > 0 && arguments[arguments.length-1] = = True) {deep = true; for (var i = 0; i < arguments.length i++) {if (!! Arguments[i].length) {if (deep) {for (var j = 0; J < Arguments[i].length; J + +) {//rec 
          Ursive Call result = Array_concat.call (result, ConcatArray (arguments[i][j), true); 
        } else {result = Array_concat.call (result, arguments[i]);  
          } else if (i!= arguments.length-1 | | (Arguments[arguments.length-1]!== true && arguments[arguments.length-1]!== false) 
      {Result.push (arguments[i]); 
    }return result; 
        }//-----Core $.fn.extend ({zslider:function (zslidersetting, AutoStart) {var itemlenght = 0, Curritemindex = 0, started = false, Ointerval = {}, setting = {intervaltime:300 0, Step:1, Imagepanels: $ (), Animateconfig: {atype: ' fade ', F  
          adeinspeed:500, fadeoutspeed:1000}, Panelhoverstop:true, Ctrlitems: $ (), Ctrlitemactivatetype: ' Hover ' | | ' Click ', Ctrlitemhovercls: ', flipbtn: {}, Panelhovershowflipbtn:true, CALLB 
       
      ACKs: {Animate:null}}, that = this;  
              Core methods var slider = {pre:function () {var toindex = itemlenght + 
            (curritemindex-setting.step)% Itemlenght; 
          Slider.to (Toindex); }, 
          Next:function () {var Toindex = (curritemindex + setting.step)% Itemlenght; 
          Slider.to (Toindex);  }, To:function (Toindex) {//handle The index value if (typeof Toindex = = ' function ') {Toindex = Toindex.call (That, ConcatArray (Setting.imagepanels, True), ConcatArray (s 
            Etting.ctrlitems, True), Curritemindex, step); 
            } if (Window.isnan (Toindex)) {toindex = 0; 
            } Toindex = Math.Round (+toindex)% Itemlenght; 
            if (Toindex < 0) {Toindex = Itemlenght + toindex; var Currentpanel = Setting.imagePanels.eq (curritemindex), Topanel = Setting.imag Epanels.eq (toindex), Currrntctrlitem = Setting.ctrlItems.eq (curritemindex) Toctrlitem = setting. 
      Ctrlitems.eq (Toindex);      if (!setting.callbacks.animate | |  
                      Setting.callbacks.animate.call (That, ConcatArray (Setting.imagepanels, True), ConcatArray (Setting.ctrlitems, True), Curritemindex, toindex) = = True) {Currrnt 
              Ctrlitem.removeclass (SETTING.CTRLITEMHOVERCLS); 
               
              Toctrlitem.addclass (SETTING.CTRLITEMHOVERCLS); 
              Topanel.fadein (Setting.animateConfig.fadeInSpeed); 
            Currentpanel.fadeout (Setting.animateConfig.fadeOutSpeed); 
          }//set the current item index curritemindex = Toindex; 
              }, Start:function () {if (!started) {started = true; 
            Ointerval = Window.setinterval (Slider.next, setting.intervaltime); 
  }}, Stop:function () {if (started) {started = false;            Window.clearinterval (Ointerval); 
          }, Isstarted:function () {return started; 
      } 
      }; 
           
          function InitData () {if (zslidersetting) {var temp_callbacks = zslidersetting.callbacks; 
          $.extend (setting, zslidersetting); 
           
          $.extend (Setting.callbacks, temp_callbacks); 
        Itemlenght = Setting.imagePanels.length; 
        }//convert to the jquery object setting.imagepanels = $ (setting.imagepanels); 
        Setting.ctrlitems = $ (setting.ctrlitems); 
        Setting.flipBtn.container = $ (Setting.flipBtn.container); 
        Setting.flipBtn.preBtn = $ (SETTING.FLIPBTN.PREBTN); 
      Setting.flipBtn.nextBtn = $ (SETTING.FLIPBTN.NEXTBTN); 
        The function Initlook () {//show the "the" the "the" the "the" the "the" and hide Other setting.imagePanels.hide (); 
        Setting.imagePanels.filter (': I '). Show (); ActIvate the "I Control" and deactivate other Setting.ctrlItems.removeClass (SETTING.CTRLITEMHOVERCLS); 
        Setting.ctrlItems.filter (': I '). addclass (SETTING.CTRLITEMHOVERCLS); 
        $ (that). css (' overflow ', ' hidden '); 
        if (setting.panelhovershowflipbtn) {showflipbtn (false);  The function initevent () {$ concatarray (setting.imagepanels, Setting.flipBtn.preBtn, 
          Setting.flipBtn.nextBtn, True). Hover (function () {if (setting.panelhoverstop) {slider.stop (); 
          } if (setting.panelhovershowflipbtn) {showflipbtn (true); 
          }, Function () {Slider.start (); 
          if (setting.panelhovershowflipbtn) {showflipbtn (false); 
        } 
        }); 
          if (Setting.ctrlitemactivatetype = = = ' click ') {setting.ctrlItems.unbind (' click '); 
           Setting.ctrlItems.bind (' click ', function () { Slider.to ($ (this). index ()); 
        }); 
            else {setting.ctrlItems.hover (function () {slider.stop ()); 
          Slider.to ($ (this). index ()); 
          }, Function () {Slider.start (); 
        }); 
        } setting.flipBtn.preBtn.unbind (' click '); 
        Setting.flipBtn.preBtn.bind (' click ', Function () {slider.pre (); 
        }); 
        Setting.flipBtn.nextBtn.unbind (' click '); 
        Setting.flipBtn.nextBtn.bind (' click ', Function () {slider.next (); 
      }); 
         
        function init () {initdata (); 
         
        Initlook (); 
      Initevent (); 
          function Showflipbtn (show) {var hascontainer = setting.flipBtn.container.length > 0, 
        Eles Eles = Hascontainer? Setting.flipBtn.container://to the DOM array:/*array_concat.call (array_slice.apply (SETTING.FLIPBT N.PREBTN), ARRAY_SLIce.apply (SETTING.FLIPBTN.NEXTBTN)); */ConcatArray (SETTING.FLIPBTN.PREBTN, setting.flipbtn. 
        NEXTBTN, True); 
        if (show) {$ (eles). Show (); 
        } else {$ (eles). Hide (); 
      } init (); if (Arguments.length < 2 | |!! 
      AutoStart) {Slider.start (); 
    return slider; 
} 
  }); 
 }) (JQuery, window, document);