Product advertising effect based on JQuery_jquery

The effect diagram is as follows:

Animation effect introduction: The effect of this set of advertisements is that the pictures will automatically play after opening the page, a total of 5 pictures from 1-5, if it belongs to the standard Go to the 1, 2, 3, 4, and 5 lists in the lower right corner and you can freely switch to the pictures you want to see. Picture switching is from bottom to top.

Production idea: first put these 5 pictures into the 5 li lists of ul,
《1》find the total number of pictures. And if we are in When you click 1.2.3.4.5, its corresponding number is passed and the corresponding picture is displayed.
《2》If the attribute mark is placed, stop the animation (you can use clearIntval()). If the attribute mark is moved, we can use setIntval(function, time) to execute this function every 3000 milliseconds.
《3》Complete this animation function. In this function, first we can get the height of this animation area (.slider). Then use animate custom animation function to achieve changes in the TOP position. And add a highlighting effect to the numbers in the current li.
《4》One more thing is to make the TOP changes here normally, be sure to set "position:relative;" in the parent tag (.ad) of the current area, and everything will be OK. The production code is as follows:

1》The html structure is as follows:

Copy the code The code is as follows:

• 
  
• 


• 


• 


• 

• 1


• 2


• 3


• 4


• 5< /li>
  

2》The jquery code is as follows:

Copy code The 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); //" this " here can be replaced with " $(this) "
showImg(index);
}).eq(0) .mouseover(); //Used for initialization, when the page is opened, the first picture is placed as the attribute to trigger the animation.


//Use $(".ad").hover(function(){
clearInterval(adTimer);
},function() {
adTimer = setInterval(function(){
showImg(index);
index ;
if( index == len ){ index=0; }
} , 3000);
}).trigger("mouseleave");
})

//Display different images through 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》Corresponding CSS style:

Copy code The code is as follows:

.content_right{
배경:#eee;
테두리: 1px 단색 #AAAAAA;
너비: 586px;
플로트:왼쪽;
}


.content_right .ad {
margin-bottom:10px;
폭:586px;
높이:150px;
오버플로:숨김;
위치:상대적;
}

.content_right .slider,
.content_right .num {
위치:절대;
}

.content_right .slider li{
list-style:none;
디스플레이:인라인;
}

.content_right .slider img{
너비:586px;
높이:150px;
디스플레이:블록;
}
.content_right .num{
right:5px;
하단:5px;
}
.content_right .num li{
float: 왼쪽;
너비: 16px;
높이: 16px;
줄 높이: 16px;
텍스트 정렬: 가운데;
글꼴군: Arial;
글꼴 크기: 12px;
색상: #FF7300;
배경색: #fff;
테두리: 1px 실선 #FF7300;
오버플로: 숨김;
여백: 3px 1px;
커서: 포인터;
}
.content_right .num li.on{
너비: 21px;
높이: 21px;
줄 높이: 21px;
색상: #fff;
배경색: #FF7300;
글꼴 크기: 16px;
여백: 0 1px;
테두리: 0;
글꼴 두께: 굵게;
}