The commonly used scrolling focus image effect code in shopping malls is simple and practical_jquery

There are many effects of this kind of mall on the Internet, but most of them are plug-ins, or the JS is too complicated to write, which seems to be difficult for children who are learning. This one looks simpler and easier to understand. If you need it, please watch it. You are also welcome to comment and post code (for convenience, you can just copy the code and use it without adding anything else):

Copy code Code As follows:

< ;script type="text/javascript">
$(function(){
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//Slide in to stop animation, slide out to start animation.
$('.ad').hover(function(){
clearInterval( adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index)
index ;
if(index==len){index=0; }
}, 3000);
}).trigger("mouseleave");
})
// Display different slides by controlling top
function showImg(index) {
var adHeight = $(".content .ad").height();
$(".slider").stop(true,false).animate({top : -adHeight*index}, 1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}

• 


• < img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" width="586" height="150"/>



• 


• < /li>
  

• 1


• 2


• 3


• 4


• 5

The rendering is as follows: