Image scrolling Based on Jquery _ jquery

A lot of results should be encapsulated into plug-ins. Here is just a reference to the results. It should be helpful for beginners like me to reference the jquery framework first.

Then start the HTML code:

The Code is as follows:

Professional Q & A Platform
Ah, they are developed, but they are separated.
Al-City Operation

Then look at CSS (you can also directly look at JS ):

The Code is as follows:

Ul, img, li, {
Border: 0;
Margin: 0;
Padding: 0;
List-style: none;
}
# New_zlMimgMv {
Border: 1px solid # B8B8B8;
Height: 192px;
Margin-bottom: 12px;
Width: 446px;
}
# New_zlMimgMv. imgMvBox, # New_zlMimgMv. imgMvBox img {
Height: 160px;
Width: 446px;
}
# New_zlMimgMv. imgMvBox {
Overflow: hidden;
}
# New_zlMimgMv. imgMvNum {
Background: # E6E6E6;
Display: block;
Float: left;
Height: 32px;
Line-height: 32px;
Text-align: center;
Text-decoration: none;
Width: 120px;
Color: #282828;
}
# New_zlMimgMv. imgMvNum a. changeThis {
Background: # A29F9F;
Color: # FFFFFF;
}

Finally, the JQ code is:

The Code is as follows:

Var imgLength = $ ("# imgMvCon li"). length; // gets the total number of elements to be rolled.
Var imgHeight = $ ("# imgMvCon li"). height (); // obtain the height of the element to be rolled
Var totalHeight = imgLength * imgHeight; // obtain the total height of the element to be rolled.
Var mvul = $ ("# imgMvCon ");
Var positiontop = 0; // define an initial offset position 0var linknum = 0; // define an initial value for controlling the button to switch the index
Var mvTimer; // sets a timer.
Mvul.parent().css ({"position": "relative"}) // set the CSS of the container
Mvul.css ({"position": "absolute"}); // same as above
$ (". ImgMvNum a"). eq (linknum). addClass ("changeThis"); // Add a style to the first button
Function imgMv (){
If (imgLength> 1) // if it is not an image, execute the following
{
Positiontop = positiontop + imgHeight; // The height is increased at a low-cost location if no execution is performed.
If (positiontop = totalHeight) // if the offset value is equal to the total height, set the offset value back to 0.
{
Positiontop = 0;
}
Linknum ++; // run once. Add 1 to the index used for controlling button switching.
If (linknum> = imgLength) // if the index is greater than or equal to the total length of the rolling element, the index is set back to 0.
{
Linknum = 0;
}
Mvul. animate ({top:-(linknum * imgHeight)}, 400); // use the animate attribute to scroll. 'linknum * imgheight' facilitates synchronization with buttons.
$ (". ImgMvNum a"). removeClass ("changeThis"); // remove the style
$ (". ImgMvNum a"). eq (linknum). addClass ("changeThis"); // Add a style
}
}
Function startMv (){
MvTimer = setInterval (imgMv, 4000); // timer function
}
StartMv (); // run the timer
$ (". ImgMvNum a"). each (function () {// traverse button
$ (This). mouseover (function () {// move the cursor over the button
ClearInterval (mvTimer); // clear the timer
Linknum = $ (this). index (); // click the button to set linknum as the index of the current button
$ (". ImgMvNum a"). removeClass ("changeThis ");
$ (This). addClass ("changeThis ");
Mvul. animate ({top:-(linknum * imgHeight)}, 300); // use the animate attribute to scroll. 'linknum * imgheight' facilitates synchronization with buttons.
}). Mouseout (function (){
StartMv (); // execute the timer again after removing the mouse
});
});

Every sentence is clearly commented out. Here is a simple upward effect, and the Code may not be optimized. It is mainly for your reference and provides ideas.
You can encapsulate these effects into plug-ins and write other directions or effects.
Check the effect (the style in this article cannot be completely put in. You can copy it to your computer)