jquery picture scrolling Switch effect code

The HTML part is the simplest, as long as we simply write a few can be, mainly in the CSS and JS parts.

The code is as follows

Copy Code

<div id= "NEW_ZLMIMGMV" > <div class= "Imgmvbox" > <ul id= "Imgmvcon" > <li><a href= "#" title= "" ></a></li> <li><a href= "#" title= "" ></a></li> <li><a href= "#" title= "" ></a></li> </ul> </div> <div class= "Imgmvnum" > <a href= "javascript:;" > Professional QA Platform </a> <a href= "javascript:;" style= "WIDTH:206PX;" > It's the developed temple, but it's </a> separated. <a href= "javascript:;" > The city of Assad industry move </a> </div> </div>

CSS code is the control effect code required by this example, you can do it according to their own needs to deal with

code is as follows

copy code

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 A.changethis { Background: #A29F9F; Color: #FFFFFF; }

The following code is based on the jquery box to write out, you can save as a JS file.

The code is as follows

Copy Code

var imglength=$ ("#imgMvCon li"). length;//get the total number of scrolling elements var imgheight=$ ("#imgMvCon li"). Height ();//Get the height of the element you want to scroll var totalheight=imglength*imgheight;//gets the total height of the required scrolling element var mvul=$ ("#imgMvCon"); var positiontop=0;//defines an initial offset position 0var linknum=0;//defines an initial value for controlling the toggle index of a button var mvtimer;//set a timer Mvul.parent (). css ({"position": "Relative"})//Set the container's CSS Mvul.css ({"position": "Absolute"});/Ibid. $ (". Imgmvnum a"). EQ (LinkNum). addclass ("ChangeThis");//Add a style to the first button function IMGMV () { if (imglength>1)//If not a picture, execute the following { Positiontop=positiontop+imgheight;//didn't perform a cheap position, plus a height. if (positiontop==totalheight)//If the offset value equals the total height, set the offset back to 0 { Positiontop=0; } linknum++;//run once, index plus 1 for control button toggle 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)//scrolling with animate properties, ' linknum*imgheight ' easy and button sync $ (". Imgmvnum a"). Removeclass ("ChangeThis");//removing style $ (". Imgmvnum a"). EQ (LinkNum). addclass ("ChangeThis");//Add Style } } function Startmv () { Mvtimer=setinterval (imgmv,4000);//Timer function } STARTMV ()//Run Timer $ (". Imgmvnum a"). each (function () {//Traversal button $ (this). MouseOver (function () {//Mouse pass button Clearinterval (Mvtimer);//Clear Timer linknum=$ (This). Index ()//mouse over button to set LinkNum to the current button index $ (". Imgmvnum a"). Removeclass ("ChangeThis"); $ (this). addclass ("ChangeThis"); Mvul.animate ({top:-(linknum*imgheight)},300)//scrolling with animate properties, ' linknum*imgheight ' easy and button sync }). mouseout (function () { STARTMV ()//mouse move out again execute timer }); });

Here is all based on the jquery box approach, I do not provide the jquery box file, you can go to the official website to download.