jquery implementation Widescreen Picture Carousel Example Tutorial _jquery

This example describes the jquery implementation of the widescreen picture Carousel Tutorial. Share to everyone for your reference. Specifically as follows:
The screenshot of the running effect is as follows:

Introducing the jquery Library

<script src= "Js/jquery-1.9.1.min.js" type= "Text/javascript" ></script>

Building HTML
the entire code is divided into three parts:

1, loading part of the loadding;

2, the picture part, the picture can only be 4, the heart friend improves under again;

3, the tab button part, of course, here also can only be 4 buttons, also need to improve.

<div class= "GG" id= "GG" > <div class= "ggloading" > <div class= "ggLoading2" ><em> exciting activities load
          </em></div> </div> <div class= "GGs" > <div class= "ggbox" id= "Ggbox" > <a href= "#" title= "May 22 test Open Collar Registration qualification" style= "Z-INDEX:3; Opacity:4; "
            > </a> <a href=" # "title=" the first Test of the world's carved chapters open "> </a> <a href=" # "Title=" Ancient Century Game Information manual "> <im G src= "Images/3.jpg" "alt=" "/></a> <a href=" # "title=" Game Four features announced "> </a> </div> </div> <div class=" GGB "> <div class= "Ggbtns" id= "Ggbtns" > <a title= "May 22 test Open Collar Enrollment qualification" href= ' javascript:void (0) ' class= ' Ggon ' ><em>5 month 22nd test Try to open the enrollment qualification </em></a> <a title= "The first Test of the world's carved chapters open" href= ' javascript:void (0) ' ><em> the first test of the world's carved chapters open </em></a> <a title= "The Ancient Century Game information manual" Href= ' Javascript:vo ID (0) ' ><em> Ancient Century game information manual </em></a> <a title= "The four characteristics of the game revealed" Href= ' javascript:void (0) ' &GT;&LT;EM&G T; Game Four features announcement </em></a> </div> </div> </div>

CSS Styles
Here css can be customized according to the requirements of the project, do not adhere to the following code, as long as you understand the rationale of the OK. If you do not understand the following CSS words on the evil to fill it, this will not be explained.

. ggloading,. ggLoading2 {Background-image:url (..
/images/nav.png);
  }. gg {width:100%;
  height:500px;
  position:relative;
  Z-index:1;
  Overflow:hidden;
  margin:0 Auto; Background: #d3d3d3 URL (..
/images/loading.jpg) Repeat-x;
  }. ggloading {position:absolute;
  left:40%;
  top:200px;
  width:325px;
  Text-align:center;
  height:56px;
  Background-position:0 -274px;
  Background-repeat:no-repeat;
  line-height:56px;
Color: #9c9c9c;
  }. ggLoading2 {width:330px;
  height:56px;
  background-position:213px-330px;
Background-repeat:no-repeat;
  }. ggloading em {font-weight:bold}. ggs {width:200%;
  height:500px;
  Left:-50%;
  top:0;
Position:absolute;
  }. ggbox {width:1920px;
  height:500px;
margin:0 Auto;
  }. Ggbox a {display:block;
  width:1920px;
  height:500px;
  Position:absolute;
  Z-index:1;
opacity:0.1;
  }. ggbox img {display:block;
  width:1920px;
height:500px;
  }. GGB {position:absolute; width:100%;
  left:0;
  bottom:0;
  height:40px;
  Z-index:4;
  Background-color: #32342e;
  Background-repeat:repeat-x;
background-position:50% -40px;
  }. ggbtns {width:960px;
  height:40px;
  margin:0 Auto;
  border-left:1px solid #090908;
border-right:1px solid #6a6a60;
  }. ggbtns a {float:left;
  Display:block;
  width:240px;
  height:40px;
  Text-align:center;
  padding-top:10px;
  Color: #848380;
  font-size:14px;
  line-height:40px;
  Background-position:0 10px;
  position:relative;
  Top: -10px;
  Outline:none;
  Background-repeat:no-repeat;
Cursor:pointer;
  }. Ggbtns a em {display:block;
  width:210px;
  height:40px;
  margin:0 Auto;
Overflow:hidden;
  }. ggbtns a:hover {color: #e7e7e7; ggbtns a:focus {outline:none;}. ggbtns A.ggon {color: #e7e7e7;
background-position:0 0; }. GGB,. Ggbtns a {background-image:url (..
/images/main.jpg); } a.ggon {Background-image:url (..
/images/gg.png); }

JS Code
Finally came to the key section, this part of the code is not much, let's take a look at it.

$ (function () {///document after loading execute//definition $con, $box, $btns, $i variable, Autochange auto play function, loop timer. var $con = $ (' #gg '), $box = $con. Find (' #ggBox "), $btns = $con. Find (' #ggBtns '), i = 0, Autochange = function () {i = 1;//counter +1 if (i = = 4) {i = 0;}
     
    If the counter i is 4, reset I to 0.
    $btns. Find (' a:eq (' + i + ') '). addclass (' Ggon '). Siblings (). Removeclass (' Ggon ');
    Locate the I-a tag in the tab button, add the Ggon style to it, and remove all the sibling a tags ggon var curr = $box. Find (' a:eq (' + i + '), Prev = Curr.siblings ();
    Define the Curr variable and assign it to a label for the currently displayed picture in $box, define the prev variable, and assign to all a tags in $box except the A label for the currently displayed picture. Prev.css (' Z-index ', 2);//$box The index value of all a tags, except the currently displayed picture's a label, changes to 2, moving down one layer of curr.css (' Z-index ', 3). Animate ({//$
      The index of a label for the currently displayed picture in box changes to 3, that is, move up one level, then use the jquery animation to change the transparency to 1 in 150 milliseconds, and then perform the anonymous function functions.  ' Opacity ': 1}, Function () {//$box the index value of all a labels except the currently displayed picture's a label changes to 1, and the transparency changes to 0.1 prev.css ({' Z-index ':
    1, ' Opacity ': 0.1});
  });
  loop = SetInterval (Autochange, 5000),//define timer, perform Autochange function once every 5 seconds to achieve autoplay effect. $con. Hover (function () {//define mouse hover and leave event clearinterval (loop);///Remove Loog timer when mouse hovers, stop playback}, function () {loop = SetInterval (Autochange, 5000);
  When the mouse left to load Loog timer, continue to play}); $btns. Find (' a '). Click (function () {//Define tab button Event I = $ (this). Index ()-1; The index value of the current a tag in the//tab button is 1 and assigned to the I counter Autochange  ();
Call toggle method Toggle Picture});
 });

Do not know the parents read the above comments, know the principle of it? In fact, the entire code is divided into four parts:
1. Picture switching
I as the counter, showing the current picture of I, other pictures are all hidden, to the current button for I plus Ggon style, the other buttons to remove the Ggon style, and each call switching function I since 1.
2. Auto Play
Defines a timer loop that calls a switch function every 5 seconds.
3. Mouse Hover Event
It turns out that the loop timer is cleared when the mouse is suspended, and the loop timer is loaded when the mouse leaves.
4, button events
To bind the tab button to click the event, click the index value of the current tab button on the I-1, and call the toggle function.

The above is the jquery realization picture carousel All key code, hoped that everybody studies carefully, the tutorial still has many deficiencies, hoped everybody can improve.