An image scrolling switch based on Jquery_jquery

First, you still need to reference the jquery framework.

Then start the HTML code:

Copy the code The code is as follows:

&lt ;div id="New_zlMimgMv">
<div class="imgMvBox">
<ul id="imgMvCon">
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li>
<li><a href="#" title= ""><img src="New_zlimgMv.jpg" alt="" /></a></li>
<li><a href="#" title="" ><img src="New_zlimgMv.jpg" alt="" /></a></li>
</ul>
</div>
< div class="imgMvNum">
<a href="javascript:;">Professional question and answer platform</a>
<a href="javascript:;" style="width:206px ;">Ah, it is a well-developed nunnery, but it is separated</a>
<a href="javascript:;">Assad industry in the same city</a>
</ div> Code

The code is as follows:

ul,img,li,a{ 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; 🎜> overflow: hidden;
}
#New_zlMimgMv .imgMvNum a {
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:




Copy code


The code is as follows:

　var imgLength=$("#imgMvCon li").length;//Get the total number of elements to be scrolled
var imgHeight=$("#imgMvCon li").height();//Get the height of the element that needs to be scrolled
var totalHeight=imgLength*imgHeight;//Get the total height of the element that needs to be scrolled

var mvul=$(" #imgMvCon"); var positiontop=0;//Define an initial offset position 0var linknum=0;//Define an initial value for controlling the button switching index var mvTimer;//Set a timing Containermvul.parent().css({"position":"relative"})//Set the CSS of the container mvul.css({"position":"absolute"});//Same as above$(".imgMvNum a").eq(linknum).addClass("changeThis");//Add style to the first button function imgMv(){

if(imgLength>1)/ /If it is not a picture, execute the following

{
positiontop=positiontop imgHeight;//Do not execute a cheap position plus a height
if(positiontop==totalHeight)//If the offset value is equal to The total height sets the offset value back to 0
{
positiontop=0;
}
linknum ;//Run once, the index used to control button switching is increased by 1
if(linknum> =imgLength)//If the index is greater than or equal to the total length of the scrolling element, set the index back to 0
{
linknum=0;
}
mvul.animate({top:-(linknum*imgHeight )},400);//Use animate attribute to implement scrolling, 'linknum*imgHeight' facilitates synchronization with buttons
$(".imgMvNum a").removeClass("changeThis");//Remove style
$(".imgMvNum a").eq(linknum).addClass("changeThis");//Add style
}
}
function startMv(){
mvTimer=setInterval(imgMv, 4000);//Timer function
}
startMv();//Run timer
$(".imgMvNum a").each(function(){//Traverse button
$ (this).mouseover(function(){//Mouseover button
clearInterval(mvTimer);//Clear timer
linknum=$(this).index();//Mouseover button sets linknum For the current button index
$(".imgMvNum a").removeClass("changeThis");
$(this).addClass("changeThis");
mvul.animate({top:-( linknum*imgHeight)},300);//Use the animate attribute to implement scrolling, 'linknum*imgHeight' facilitates synchronization with buttons
}).mouseout(function(){
startMv();//The mouse moves out again Execution timer
});
});


Each sentence is clearly commented. Here I simply write a simple upward effect, and the code may not be optimized. Mainly for your reference and ideas.
You can encapsulate these effects into plug-ins and write some other directions or effects.
Look at the effect (the styles in this article cannot be fully included, you can copy it to your own computer)