A picture scrolling switch based on Jquery

First of all, we need to reference the jquery framework.

Then start the HTML code:

Copy the codeThe code is as follows:

 
<div > 
<div class="imgMvBox"> 
<ul > 
<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 Q&A Platform</a>
<a href="javascript:;" style="width:206px;">Ah, it's the Fada'an Shengfang, but it's separated</a>
<a href="javascript:;">Assad's career movement in the same city</a>
</div> 
</div> 

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

Copy the codeThe 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; 
} 
#New_zlMimgMv .imgMvBox { 
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  { 
background: #A29F9F; 
color: #FFFFFF; 
} 

Finally, there is the JQ code:

Copy the codeThe 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 element height 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 the control button to switch index
var mvTimer;//Set a timer
().css({"position":"relative"})//Set the container's 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;//Not executed once the cheap position adds height once
if(positiontop==totalHeight)//If the offset value is equal to the total height, set the offset value back to 0
{ 
positiontop=0; 
} 
linknum++;//Open once, add 1 for the index used to switch buttons
if(linknum>=imgLength)//If the index is greater than or equal to the total length of the scroll element, set the index back to 0
{ 
linknum=0; 
} 
({top:-(linknum*imgHeight)},400);//Use the animate attribute to realize scrolling, 'linknum*imgHeight' is convenient for synchronizing 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 the timer
$(".imgMvNum a").each(function(){//Transfer button
$(this).mouseover(function(){//The mouse passes through the button
clearInterval(mvTimer);//Clear the timer
linknum=$(this).index();//The mouse passes the button to set linknum to the current button index
$(".imgMvNum a").removeClass("changeThis"); 
$(this).addClass("changeThis"); 
({top:-(linknum*imgHeight)},300);//Use the animate attribute to realize scrolling, 'linknum*imgHeight' is convenient for synchronizing with buttons
}).mouseout(function(){ 
startMv();// Mouse out and execute the timer again
}); 
}); 

Each sentence is clearly commented. Here I just wrote a simple upward effect, and the code may not be optimized. It is mainly to provide you with reference and ideas.
You can encapsulate these effects into plug-ins and write some other directions or effects.
Check out the effect (the styles in this article cannot be completely put in, you can copy them to your own computer)