Product advertisement Effect Based on JQuery

:

Animation effects:The effect of this set of ADS is that after the page is opened, the image will be automatically played, from 1 to 5 a total of five images, if the label is in the lower right corner of the 1, 2, 3, 4, 5 list, you can switch to the desired image as needed. Image switching is performed from bottom to top.

Production idea: first put the five images into the five li lists of ul,
1. Obtain the total number of image items. If we click 1.2.3.4.5 and pass the corresponding number to it, the corresponding image will be displayed.
2. If the label is placed, stop the animation (clearIntval () can be used). If the label is moved, we can use setIntval (function, time) execute this function every 3000 milliseconds.
3. Complete the animation function. In this function, we can first obtain the height of the animation area (. slider. Use the animation function of animation to change the TOP position. And add the highlighted effect to the number in the current li.
Another aspect of "4" is that to make TOP changes normal, you must mark the parent tag in the current region (. set "position: relative;" in ad). Everything is OK. The Code is as follows:

1. the html structure is as follows:
Copy codeThe Code is as follows:
<Div class = "ad">
<Ul class = "slider">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Ul class = "num">
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
</Ul>
</Div>


2. jquery code:

Copy codeThe Code is as follows:
// Hyperlink text prompt
$ (Function (){
Var len = $ (". num> li"). length;
Var index = 0;
Var adTimer;

$ (". Num li"). mouseover (function (){
Index = $ (". num li"). index (this); // here, "this" can be changed to "$ (this )"
ShowImg (index );
}). Eq (0). mouseover (); // used to trigger an animation when the first image is marked as a label when the page is opened.


// Takes the <ad image> as the object, which is a slide-in to stop the animation and starts the animation.
$ (". Ad"). hover (function (){
ClearInterval (adTimer );
}, Function (){
AdTimer = setInterval (function (){
ShowImg (index );
Index ++;
If (index = len) {index = 0 ;}
},3000 );
}). Trigger ("mouseleave ");
})

// Display different images with the given Index

Function showImg (index ){
Var adHeight = $ (". content_right. ad"). height ();
$ (". Slider"). stop (true, false). animate ({"top":-adHeight * index}, 1000 );
$ (". Num li"). removeClass ("on ")
. Eq (index). addClass ("on ");
}


3. CSS style:


Copy codeThe Code is as follows:
. Content_right {
Background: # eee;
Border: 1px solid # AAAAAA;
Width: 586px;
Float: left;
}


. Content_right. ad {
Margin-bottom: 10px;
Width: 586px;
Height: 150px;
Overflow: hidden;
Position: relative;
}

. Content_right. slider,
. Content_right. num {
Position: absolute;
}

. Content_right. slider li {
List-style: none;
Display: inline;
}

. Content_right. slider img {
Width: 586px;
Height: 150px;
Display: block;
}
. Content_right. num {
Right: 5px;
Bottom: 5px;
}
. Content_right. num li {
Float: left;
Width: 16px;
Height: 16px;
Line-height: 16px;
Text-align: center;
Font-family: Arial;
Font-size: 12px;
Color: # FF7300;
Background-color: # fff;
Border: 1px solid # FF7300;
Overflow: hidden;
Margin: 3px 1px;
Cursor: pointer;
}
. Content_right. num li. on {
Width: 21px;
Height: 21px;
Line-height: 21px;
Color: # fff;
Background-color: # FF7300;
Font-size: 16px;
Margin: 0 1px;
Border: 0;
Font-weight: bold;
}