jquery code to achieve the picture wall Automatic + manual fading switching effect _jquery

Related reading:

jquery code to achieve picture Carousel effect (i)

On the Web page can often see a background picture can automatically fade in and out of the effect of switching, very beautiful, practical is very high. Today small make up a time to share with you based on jquery code to achieve picture wall Automatic + manual fade in and out switch effect, study together!

First show you the effect of the picture, if you think it is good, please refer to the specific implementation code.

Add a div (class=container), set width and height, and set a width of 800px, high 450px. Add a centered positioning. Inside the div add a UL (class= "img") list used to hold the picture, set the UL inside the LI tag position for absolute, then the picture will coincide together, set display for none. The picture is set to the same width and height as container. Add an UL list to the container to hold the following row of numbers, and then position and set accordingly. Add two div:left and right, respectively, two buttons, the corresponding positioning and setting, inside the arrows are greater than and less than number.

The realization thought and the principle introduction:

When the mouse moves to the corresponding number, use $ (this). Index () to get the serial number in the container in which the number is located, and then pass the serial number to the EQ () function to get the LI tag, and then add the function Fadein (); The hidden picture is displayed, and the sibling is called. (). fadeout (), so that siblings of siblings are hidden so that the previously displayed images are hidden.

Add the SetInterval () function to make the picture change at the same time.

I think one of the main problems is the conflict between automatic switching and manual switching, when the mouse is moved to the top of the picture should stop automatic switching, where the method is:

Add the hover function to the container, when the mouse moved to the container inside the time with the Clearinterval () function to remove the interval function, so that when the mouse moved to the top of the picture, the picture will not switch, Add the SetInterval () function when the mouse is moved out. So the picture can continue to switch.

Note:I and t need to be set to global variables so that different functions can be shared. I represents the index of the currently displayed picture. T is the ID of the setinterval. When the mouse is moved out of the time no more var a t, just: T=setinterval (time_fun,1500);

EQ (n): Find nth Element

eg:$ (' li '). EQ (2). CSS (' background-color ', ' red ');//Set the background color of the second Li label to Red

Index (): Finds an indexed value for this element

Interested in studying the code:

<! DOCTYPE html>  

The above is small series to bring you the jquery code to achieve the picture wall Automatic + manual fade and fade effect, I hope to help you, but also thank you for your support of cloud-Habitat community website!