我正在尝试使用setInterval
创建一个图像幻灯片,当鼠标在.project-img
上时开始播放,当鼠标离开.project-img
时暂停。我遇到的问题是当鼠标离开时调用清除间隔以暂停幻灯片显示,我当前收到错误:
Uncaught ReferenceError: cycle is not defined
我哪里错了?
var Image = {
init: function() {
Image.setupImages();
Image.bindEvents();
},
bindEvents: function() {
$('.project-img').hover(function() {
var hovered = $(this);
var thumbnailIndex = 0
var thumbnailArray = hovered.children()
console.log(thumbnailArray);
var cycle = setInterval(function(){
thumbnailIndex++
if (thumbnailIndex === thumbnailArray.length) {
thumbnailIndex = 0;
thumbnailArray.removeClass('active');
thumbnailArray.eq(0).addClass('active');
} else {
var $visible = thumbnailArray.eq(thumbnailIndex);
thumbnailArray.removeClass('active');
$visible.addClass('active');
}
}, 700);
}, function() {
clearInterval(cycle);
});
},
setupImages: function() {
var projectImage = $('.project-img');
projectImage.each(function(project) {
$(this).find('.project-thumbnail:eq(0)').addClass('active');
});
}
}
$(document).ready(function() {
Image.init();
});
.project-thumbnail {
visibility: hidden;
display: none;
}
.active {
visibility: visible;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
</div>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
</div>
这是一个范围问题,你已经定义了一个函数内的循环,所以它不能离开。把var cycle
放在var Image
上面,你的问题就会解决!或者,如果你想将它限定在Image var中,你可以用cycle
替换Image.cycle
,这也可以。
变量cycle
的范围不同。而不是使用hover
使用each
,在cycle
的外部范围内声明hover
变量,如下所示:
var Image = {
init: function() {
Image.setupImages();
Image.bindEvents();
},
bindEvents: function() {
$('.project-img').each(function() {
var hovered = $(this);
var cycle;
hovered.hover(function() {
var thumbnailIndex = 0;
var thumbnailArray = hovered.children();
cycle = setInterval(function() {
thumbnailIndex++
if (thumbnailIndex === thumbnailArray.length) {
thumbnailIndex = 0;
thumbnailArray.removeClass('active');
thumbnailArray.eq(0).addClass('active');
} else {
var $visible = thumbnailArray.eq(thumbnailIndex);
thumbnailArray.removeClass('active');
$visible.addClass('active');
}
}, 700);
}, function() {
clearInterval(cycle);
});
});
},
setupImages: function() {
var projectImage = $('.project-img');
projectImage.each(function(project) {
$(this).find('.project-thumbnail:eq(0)').addClass('active');
});
}
}
$(document).ready(function() {
Image.init();
});
.project-thumbnail {
visibility: hidden;
display: none;
}
.active {
visibility: visible;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
</div>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
</div>