Home Banner Focus Chart Automatic Carousel effect

Today it is my pleasure to introduce some of the problems I encountered when I wrote a small task in the first two days, if I could help or inspire.

<div class= "banner" >

<a class= "" href= "#" target= "_blank" ></a>
<a class= "" href= "#" target= "_blank" ></a>
<a class= "" href= "#" target= "_blank" ></a>
<a class= "" href= "#" target= "_blank" ></a>
<a class= "" href= "#" target= "_blank" ></a>
</div>

The function to be implemented is the carousel of the banner graph

The general idea is as follows:

1. Store these images in an array, and then display the first image, the other hidden.

2. Define a function to display the next picture, that is, this picture is hidden, the next picture is displayed. If it is the last one, this sheet is hidden, the first one shows, so that the loop plays.

3. Call this function every once in a while.

$ (function () {
var pics = $ (". Banner a img");
var len = pics.length;
Pics.eq (0). Show ();
for (var i = 1; i < Len; i++) {
Pics.eq (i). Hide ();
}

function Turn () {

if (I < 5) {
if (Pics.eq (i). Not (' hidden ')) {
Pics.eq (i). Hide ();
Pics.eq (i + 1). Show ();
}
i++;
}
if (i = = 5) {
Pics.eq (5). Hide ();
Pics.eq (0). Show ();
i = 0;
}
}
i = 0;
SetInterval (Turn, 2000);
});

There are a few knowledge points that need to be summed up:

1. Select an element in the array, using ARR.EQ (i), where I is the index.

2. Determine if the element is displayed, using the not selector, which can be used directly on the element, Pics.eq (i). Not (' hidden ') is the selection of an element in the pics array with an index value of I and no hidden elements.

3. The For loop is not used here in the turn function because every time the turn function is executed once, and the turn function actually only needs to change one picture per execution, if a for loop is used, each execution of the turn function executes a for loop once, To traverse all the elements and easily cause confusion, it is not easy to form ideas.

4. Here through the bottom i = 0; Put I zero before the first execution, meaning that starting from the first picture, after each operation, i++, until the last picture, again the I zero, cycle to start again.

5. SetInterval (turn,2000); The first parameter is the function name, do not need to write parentheses, do not add quotation marks, the second parameter is the interval time, here should be 2000 milliseconds, that is, 2 seconds, can be set according to actual needs.

The accumulation of knowledge is a long process, and practice and experience also takes time to precipitate.

Home Banner Focus Chart Automatic Carousel effect