demo在这http://jsfiddle.net/ypv2g2b8/
5
502$(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呢？
请大家指点迷津。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
1.trigger("mouseleave") 触发了 timer
2.触发0th li的mouseover的时间帮顶
3.控制显示哪张图片的， stop不知道，很少写js动画
用css3的animation，几行css就够了...
补充楼上，stop是为了停掉上一次没完执行的动画，比如你很快的连续按很多次下一页，就会出现动画错乱的bug，这里的stop就是为了处理这个bug
用负值是因为他用marginTop的形式，图片是从上往下排列，负的就是往上滑动的意思；用那个hover来触发是为了，鼠标不放在图片上，图片每个3秒自动切换，鼠标放在了图片上，则停止切换图片