作者:小妮子831020 | 来源:互联网 | 2023-09-03 12:00
demo在这http://jsfiddle.net/ypv2g2b8/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| $(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();
//滑入停止动画,滑出开始动画.
$('#scrollPics').hover(function() {
clearInterval(adTimer);
}, function() {
adTimer = setInterval(function() {
showImg(index)
index++;
if (index == len) { //最后一张图片之后,转到第一张
index = 0;
}
}, 3000);
}).trigger("mouseleave");
function showImg(index) {
var adHeight = $("#scrollPics>ul>li:first").height();
$(".slider").stop(true, false).animate({
"marginTop": -adHeight * index + "px" //改变 marginTop 属性的值达到轮播的效果
}, 1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
}); |
1,第一个疑问是这个轮播图是怎么运行起来的?他的定时器是写在hover方法中的。没有hover元素怎么会在加载时就运行呢?
2, $(".num li").mouseover事件后面加.eq(0).mouseover();是什么意思呢?
3,showImg方法中为什么要先stop一下在运行animate?
"marginTop": -adHeight * index 为什么要是负的adHeight乘以index呢?
请大家指点迷津。