JQuery code implements automatic image wall + manual fade-in and fade-out switching _ jquery

On the web page, you can often see that background images can automatically fade in and switch over. They are very nice and highly practical, today, I will share with you the jquery code-based Automatic Image wall + manual fade-in and fade-out switching. If you are interested, let's learn it together. Related reading:

Jquery code for image carousel (1)

On the web page, you can often see that background images can automatically fade in and switch over, which is very beautiful and highly practical. Today, let's take a moment to share with you the effect of automatic image wall + manual fade-in and fade-out Switching Based on jquery code. Let's take a look!

For more information, see the specific implementation code.

Add a p (class = container) and set the width and height. The width is 800px and the height is pixel. Add center positioning. Add a ul (class = "img") List in p to hold the image. Set the li label position in ul to absolute. Then, the image will overlap, set display to none. The width and height of the image are the same as those of the container. Add an ul list in the container to hold the following row of numbers, and then locate and set accordingly. Add two p: left and right buttons, respectively, to locate and set them. The arrows in them are greater than and smaller than signs.

Implementation ideas and principles:

When you move the cursor over the corresponding number, use $ (this ). index () obtains the serial number in the container where the number is located, transmits the serial number to the eq () function to obtain the li tag, and then adds the fadeIn () function (); in this way, the hidden image is displayed and sibling () is called (). fadeOut () to hide sibling nodes of the same level, so that the previously displayed images are hidden.

Add the setInterval () function to change the image at the same time.

I think a major problem is the conflict between automatic switch and manual switch. When you move the mouse over the image, the automatic switch should be stopped. The method used here is:

Add the hover function to the container. When you move the cursor to the container, use the clearInterval () function to remove the time interval function. In this way, when you move the cursor to the image, the image will not be switched, add the setInterval () function when the mouse moves out. In this way, the image can continue switching.

Note:I and t need to be set to global variables so that different functions can be shared. I indicates the index of the currently displayed image. T is the ID of setInterval. When you move the mouse out, you don't need to var another t. You only need to: t = setInterval (time_fun, 1500.

Eq (n): locate the nth Element

Eg: background ('li'{.eq(2}.css ('background-color', 'red'); // set the background color of the second li label to red

Index (): locate the index value of the element.

If you are interested in studying the Code:

 Jquery_img_switch