用jQuery写的图片轮播为何只有初次鼠标进入才能停止定时器?给我的感觉是后面无法停止自动播放,而且播放速度加快,调试很久不知问题出现在哪。
附上demo网址参考:http://huzerui.com/slideBox
js主要代码如下:
$(function () {
var stage=$('.pic-stage');
var pic=$('.pic-box');
var panel=$('.panel');
var panelLi=$('.panel li');
//获取单张图片的大小
var picWidth=parseInt($('.pic-box li:eq(0)').css('width'));
//获取图片的个数
var size=panelLi.size();
/*根据导航条li的个数实现居中布局
*采用width()方法获取的宽度不包括margin
*/
var panelWidth=panel.width();
//获取的margin包含上下边距和左右边距,用split()方法取得margin左右的数值
var margin=parseInt(panelLi.css('margin').split(' ')[1]);
var iNow=0;
pic.css('width',picWidth*size);
panel.css('margin-left',-(panelWidth+margin*size)/2);
for(var i=0;i<size;i++){
panelLi.eq(i).attr('index',i);
}
//导航条事件
panelLi.hover(function() {
iNow=$(this).attr('index');
pic.stop().animate({left:(-iNow*picWidth)+'px'});
});
//自动播放
function autoPlay(){
iNow++;
if (iNow===size) {
iNow=0;
}
pic.stop().animate({left:(-iNow*picWidth)+'px'});
}
var timer=setInterval(autoPlay,1000);
//鼠标悬浮停止定时器
stage.hover(function() {
clearInterval(timer);
}, function() {
setInterval(autoPlay,1000);
});
//鼠标悬浮停止定时器
stage.hover(function() {
clearInterval(timer);
}, function() {
setInterval(autoPlay,1000); //这里你的第二次hover事件就找不到上次的timer了, 因此你这里要定义一个timer = setInterval();
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。