用jQuery寫的圖片輪播為何只有初次鼠標(biāo)進(jìn)入才能停止定時(shí)器？給我的感覺是后面無法停止自動(dòng)播放，而且播放速度加快，調(diào)試很久不知問題出現(xiàn)在哪。

附上demo網(wǎng)址參考：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'));

//獲取圖片的個(gè)數(shù)

var size=panelLi.size();

/*根據(jù)導(dǎo)航條li的個(gè)數(shù)實(shí)現(xiàn)居中布局

*采用width()方法獲取的寬度不包括margin

*/

var panelWidth=panel.width();

//獲取的margin包含上下邊距和左右邊距，用split()方法取得margin左右的數(shù)值

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

panelLi.eq(i).attr('index',i);

}

//導(dǎo)航條事件

panelLi.hover(function() {

iNow=$(this).attr('index');

pic.stop().animate({left:(-iNow*picWidth)+'px'});

});

//自動(dòng)播放

function autoPlay(){

iNow++;

if (iNow===size) {

iNow=0;

}

pic.stop().animate({left:(-iNow*picWidth)+'px'});

}

var timer=setInterval(autoPlay,1000);

//鼠標(biāo)懸浮停止定時(shí)器

stage.hover(function() {

clearInterval(timer);

}, function() {

setInterval(autoPlay,1000);

});

});

總結(jié)

以上是生活随笔為你收集整理的html自动轮播计时器不准,用jQuery写的图片轮播为何停止定时器只能停止一次？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。