How do I understand jquery (6), case study slide Rotation

Before we start, let's take a look at the so-called slide. First of all, we generally talk about slides. The first thing we think about is PPT. (Not PPTV, it's powerpoint _ ^). The role of the PPT is very clear. It is a screen-by-screen display with less text... syntaxHighlighter. all ();

Before we start, let's take a look at the so-called slide. First of all, we generally talk about slides. The first thing we think about is PPT. (Not PPTV, powerpoint _ ^). The role of the PPT is clear. It is displayed on a screen,Less text, more graphicsThis is a feature of it, so we use slides mainly for pictures. If it is a large text segment, we should use the tab mentioned in the previous section. Since it is an image, there should be a very attractive topic, such as a door, or someone else will click it to see it, right? Since it is a very important content, therefore, generally, slides are most important on the entire website. Based on Human instinct, the first way to open a webpage is to look at the webpage first.ContentThe same is true for the search engine in the upper left corner of the page. Therefore, the search engine cannot be put at will, that is, not more or less. Otherwise, it will be a waste. Generally, three to five search engines are put here.Topic. It is a little difficult to pull it back, so we will go to the topic. In short, slides have the advantages of tabs and have their own characteristics. It's just a good thing, but there is usually only one such thing on a page, that is, the upper left corner, or the part above.

 

Let's analyze another feature of the slide. It has the function of regular rotation. In the PPT, it also has some small animations. As mentioned above, it is very important, but now the search engine is not powerful for images, so we finally add the explanatory text to or from the image. Well, after talking about such a long paragraph of text, we should enter the process of writing functions.

 

Click here for the instance demonstration in this article!

 

First, let's typeset it first, there is a container, and then put some options in it, either hidden when it exceeds, or only show one of them, come, our dom structure:

Careful friends may have discovered that the structure is exactly the same as the tab in the previous article.

 

Okay. The functional code for the tab should be as follows:

Function click1 (){
Var index = $ (this). index ();
$ (". Focus_tab> div. on"). removeClass ("on ");
$ (". Focus_tab> div: eq (" + index + ")"). addClass ("on ");
$ (This). siblings (". on"). removeClass ("on ");
$ (This). addClass ("on ");
}
$ (". SidePic li"). bind ('click', click1)
 
This is the same. We have added a class on style. In fact, we can use jquery's show () and hide () Methods to hide the display, so the above method can also be changed to this:

Function click2 (){
Var index = $ (this). index ();
$ (". Focus_tab> div"). hide ()
$ (". Focus_tab> div: eq (" + index + ")"). show ();
$ (This). siblings (". on"). removeClass ("on ");
$ (This). addClass ("on ");
}
$ (". SidePic li"). bind ('click', click2)
Next, let's move the mouse over it:

$ (". SidePic li"). bind ('click', click2). bind ('mouseover', click1)
Then, we add a timer to it. There are two types of timers in JS: setTimeout and setInterval. The difference between them is that setTimeout, it is executed only once, and setInterval is infinitely executed. The corresponding methods for canceling the timer are clearTimeout and clearInterval, which are used as follows:

SetInterval (code, millisec [, "lang"])
The first parameter is the code to be periodically executed. It can be a function () {...} without a name (){...}, it can also be the name of a function, such as click1. Note that this function name is not enclosed in parentheses, and the second parameter is the number of milliseconds between them. If it is setTimout, It is the waiting time, you can also delete clearTimeout before execution. If you want to use the clearInterval method to clear the timer, You have to assign it to a variable, as shown in the following code:

Var mytime;
Function resetTime (){
Mytime = setInterval (play, 1000 );
}
ResetTime ();
Function clearTime (){
ClearInterval (mytime );
}
Here I have a resetTime method to define an infinite timer, and then I immediately execute this method. Below is a method to clear this timer. Remember, the variable mytime I defined is outside these methods so that its scope exists. The scheduled execution method is play. All we need to do is to display the next image. If it is the last one, the first image will be displayed. The following code:

Var curIndex = 0; // current index
Var imgCount = $ (". sidePic li"). length; // The total number of images.
Function play (){
CurIndex ++;
If (curIndex> = imgCount ){
CurIndex = 0;
}
// Console. log ($ ("sidePic> li: eq (" + curIndex + ")"))
$ (". SidePic> li: eq (" + curIndex + ")"). click ();
}
In the first line, I defined the current index number and then calculated the total number of images. These are not necessary. Why, because we can also query the currently displayed image and then query adjacent items, but this makes me feel irrational, so I have defined these two variables outside the function to save, in play, I first add one to the current index,(++ In js means curIndex = curIndex + 1 ),Because this function is executed to display the next image, I added one and determined whether the image size has exceeded. If the image size has exceeded, the first image is displayed, here, I use a value greater than or equal to the number because the index starts from 0, that is, if it is curIndex = 3 next time and the total number is also 3, it should show the first one, that is, the one with the index 0. You can try it here. Then I am at the bottomTriggerThe method of clicking a number is similar to triggering the event where the mouse clicks the small icon. In this way, the timer is complete, isn't it easy,It's just that the option in the previous article has a timed and ordered click method..

Okay. Is it all done? No, you have been switching this way. I can't see it clearly. I want to stop when I move the mouse up, and continue the rotation after I move it, in this case, the timer is cleared during onmouseover and the timer is reset during onmouseout. We have already written the two methods, clearTime () and resetTime. Then we bound the event:

$ (". SidePic li "). bind ('click', click2 ). bind ('mouseover', click1 ). bind ('mouseover', clearTime ). bind ('mouseout', resetTime );

Such continuous writing should not be unfamiliar. In general, the jquery method is the jquery object of the returned Node itself, so we can write it again. This is mentioned in the first article. Well, even if this slide is basically formed, some people may say that this is not cool at all. It's too old to hide it. Isn't it just as special effects like PPT? Yes, please do it yourself. You can add a filter to it, but only ie is supported. Of course, you can also write some curtain effects that Firefox also supports, so whether the amount of code is too large. Click it on your own. I wrote a Scroll display here. But I want to keep it for the next lecture. Look forward to it!

Finally, let's end this article. If you have any questions, please read this article again or join Q group 70210212. Click here for an example of this article! Thank you for watching. See you next time!

 

From Author: Tian xiangbing blog address: http://www.cnblogs.com/tianxiangbing