JQuery Implementation of wide-screen image carousel instance tutorial, jquery carousel instance tutorial

JQuery Implementation of wide-screen image carousel instance tutorial, jquery carousel instance tutorial

This example describes how to use jQuery to implement wide-screen image carousel. Share it with you for your reference. The details are as follows:
The running effect is as follows:

Introduce jquery Library

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

Construct html
The entire code is divided into three parts:

1. Load part loadding;

2. For the image part, only four images can be taken here. If you are interested, try again;

3. the TAB button section. Of course, there are only four buttons here, which also need to be improved.

<Div class = "gg" id = "gg"> <div class = "ggLoading"> <div class = "ggLoading2"> <em> loading highlights </em> </div> <div class = "ggs"> <div class = "ggBox" id = "ggBox"> <a href = "#" title = "May 22 test to enable the registration qualification "style =" z-index: 3; opacity: 4; ">  </a> <a href = "#" title = "opening the first test of the world">  </a> <a href =" # "title =" ">  </a> <a href = "#" title = "four major game features">  </a> </div> <div class = "ggb"> <div class = "ggBtns" id = "ggBtns"> <a title = "May 22 test the enable registration qualification "href = 'javascript: void (0) 'class = "ggOn"> <em> qualification for opening registration in April May 22 </em> </a> <a title = "opening a chapter in the world of the first test" href = 'javascript: void (0) '> <em> opening the cutting-down Chapter of the world's first test </em> </a> <a title = "" href = 'javascript: void (0) '> <em> ancient century game materials manual </em> </a> <a title = "four major game features" href = 'javascript: void (0) '> <em> four major game features </em> </a> </div>

CSS style
The CSS here can be customized according to the project requirements, so you don't have to stick to the following code, as long as you understand the principle of it, it will be OK. If you do not understand the following CSS, you can add it to the question. I will not explain it here.

.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, I came to the key part. There are not many codes. Let's take a look.

$ (Function () {// after the document is loaded, execute // define $ con, $ box, $ btns, $ I variable, autoChange automatic playback function, and 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 the I to 0. $ btns. find ('a: eq ('+ I + ')'). addClass ('ggon '). siblings (). removeClass ('ggon'); // find the I a tag in the TAB button and add the ggOn style to it, remove all the Class a label ggOn style var curr = $ box. find ('a: eq ('+ I +'), prev = curr. siblings (); // defines the curr variable, and assigns a value to the label of the currently displayed image in $ box, and defines the prev Variable, assigned to all the labels except the label of the currently displayed image in $ box. Prev.css ('z-Index', 2); // In the $ box, the index value of all A labels except the label of the currently displayed image changes to 2, move down a layer of curr.css ('z-Index', 3 ). animate ({// $ box, the index value of the tag of the currently displayed image changes to 3, that is, move up a layer, and then use jquery animation to change the transparency to 1 in 150 milliseconds, then run the anonymous function. 'Opacity ': 1}, 150, function () {// the index value of all A labels except the label of the currently displayed image changes to 1, and the transparency is changed to 0.1 prev.css ({'z-Index': 1, 'opacity ': 0.1}) ;}, loop = setInterval (autoChange, 5000 ); // define the timer and execute the autoChange function every 5 seconds to achieve automatic playback. $ Con. hover (function () {// defines the clearInterval (loop) event when the mouse is suspended and the Loog timer is removed when the mouse is suspended, that is, stop playing}, function () {loop = setInterval (autoChange, 5000); // when the mouse leaves, the Loog timer is loaded and the playback continues.}); $ btns. find ('A '). click (function () {// define the tab button event I = $ (this ). index ()-1; // the index value of the current A tag in the tab button-1, and assign it to the I counter autoChange (); // call the switching method to switch the image });});

I don't know if I have read the above comments and I know how it works? In fact, the entire code is divided into four parts:
1. Image Switching
Use I as the counter to display the current image as I, hide all other images, add the ggOn style to the button currently I, and remove the ggOn style from other buttons, the I auto-increment is 1 each time a function is called.
2. automatic playback
Define a timer loop and call the switching function every 5 seconds.
3. Mouse hover events
It turns out that the loop timer is cleared when the mouse is suspended, and the loop timer is loaded when the mouse is left.
4. Button events
Bind the tab button, click the event, and assign the index value of the current tab button to I to call the switchover function.

The above is all the key code for jquery to implement image carousel. I hope you will study it carefully and there are still many shortcomings in the tutorial. I hope you can improve it.