0
我有这种自动更改图像的工作,但绑定添加,所以它暂停悬停和重置时离开元素,但它继续滚动,并不会暂停。我是JS和jQuery的新手。jQuery在mouseenter和mouseout上暂停计时器不起作用
JS
var galleryTimer;
var galleryTimeOut = "2500";
var galleryImage = ".productImage";
// auto play function to go through images
function galleryPlay() {
$(galleryImage).each(function(index) {
var self = this
galleryTimer = setTimeout(function() {
$('.productImage').removeClass('active');
$(self).addClass('active');
}, index * galleryTimeOut);
});
}
// pause when hovering main image and zooming image
function galleryPause() {
clearTimeout(galleryTimer);
}
// next function to move to next image
function galleryNext() {
}
// prev function to move back to prevous image
function galleryPrev() {
}
$(galleryImage).mouseenter(function() {
galleryPause();
}).mouseleave(function() {
galleryPlay();
});
$('.galleryNext').on('click', function(event){
});
$('.galleryPrev').on('click', function(event){
});
// auto start the auto play
galleryPlay();
HTML
<ul>
<li class="productImage active">
<a><img src="http://placehold.it/350x350"></a>
</li>
<li class="productImage">
<a><img src="http://placehold.it/350x350"></a>
</li>
<li class="productImage">
<a><img src="http://placehold.it/350x350"></a>
</li>
<li class="productImage">
<a><img src="http://placehold.it/350x350"></a>
</li>
<li class="productImage">
<a><img src="http://placehold.it/350x350"></a>
</li>
</ul>
<a class="galleryNext">next</a>
<a class="galleryPrev">next</a>
因为您覆盖galleryTimer在每个迭代上,所以你有多个计时器,但你只有每有最后的计时器取消。 – epascarello
我认为你的意思是,我真的对js/jquery不熟悉,所以这是我第一次尝试这样的事情......你会建议什么?并感谢您的时间! – James
使用一个计时器,并在每次迭代中显示下一个兄弟 – epascarello