jquery Implements scrolling ads

Use jquery to implement simple scrolling ads:

The idea is to define a div,div size that matches the size of each picture. Define two UL lists in Div, one for displaying pictures and one for controlling pictures. Defines the overflow value of the div as hidden, so that only one picture is displayed within the Div, and then the entire UL is moved up and down using the jquery animate (). Make it display the specified picture.

HTML code

Press CTRL + C to copy the code<div id= "D1" > <ul id= "adv" > <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <ul id= "num" > <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </d Iv>Press CTRL + C to copy the code

CSS Code

Press CTRL + C to copy the code* {margin:0px; padding:0px; } #d1 {border:2px solid #E98C36; width:548px; height:177px; margin-left:30%; margin-top:10%; position:relative; Overflow:hidden; } #adv, #num {position:absolute; } ul li {list-style:none; Display:inline; } ul img {width:548px; height:177px; Display:block; } #num {right:5px; bottom:5px; } #num li {float:left; Color: #FF7300; Text-align:center; line-height:16px; width:16px; height:16px; font-family:arial; font-size:12px; Cursor:pointer; Overflow:hidden; MARGIN:3PX 1px; border:1px solid #FF7300; }. on {line-height:21px; width:21px; height:21px; font-size:16px; margin:0 1px; border:0; background-color:red; Font-weight:bold; }Press CTRL + C to copy the code

JS Code

Press CTRL + C to copy the code<script type= "Text/javascript" src= "js/jquery-1.7.1.js" ></script> <script type= "Text/javascript" ; var i = 0; $ (function () {///when the mouse moves to all Li subscript ("#num li"). MouseOver (function () {//Get the current Li Mark var index=$ ("#num li"). index (this); Call ShowImage () to complete the scrolling showImage (index) of the picture; }). eq (0). MouseOver (); The Var taskId is triggered when the page is loaded; $ ("#d1"). Hover (function () {//Stop scrolling clearinterval (taskId) when the mouse moves over the picture; },function () {//Start scrolling taskid=setinterval When the mouse is moved (function () {showImage (i); i++; if (i==5) i=0; },2000); }). MouseLeave (); }); Complete the scrolling function showImage (index) {i=index) of the picture; Executes the current animation and immediately clears the previous animation if the previous animation is not finished $ ("#adv"). Stop (true). Animate ({top: -177 * index}, 1000)//Current Li subscript, height The previous highlighted subscript restores the original color $ ("#num li"). EQ (index). addclass ("on"). Siblings (). Removeclass ("on"); } </script>Press CTRL + C to copy the code