我使用jquery创建了一个图像循环,它工作正常。这是我的代码。
$(document).ready(function(){
$('.images').hide();
$('#image1').show('slide', {direction: 'right'}, 500);
$('#image1').delay(2000).hide('slide', {direction: 'left'}, 500);
var sc = $('#image img').size();
var count = 2;
setInterval(function(){
$('#image'+count).show('slide', {direction: 'right'}, 500);
$('#image'+count).delay(2000).hide('slide', {direction: 'left'}, 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 3000);
$('.name').click(function(){
var name = $(this).attr('id');
name = name.replace('name', '');
count = name;
});
});
这是html代码。
<div id="image">
<img class="images" id="image1" alt="Image loop" src="image1.jpg" width="550px" height="400px"/>
<img class="images" id="image2" alt="Image loop" src="image2.jpg" width="550px" height="400px"/>
<img class="images" id="image3" alt="Image loop" src="image3.jpg" width="550px" height="400px"/>
<img class="images" id="image4" alt="Image loop" src="image4.jpg" width="550px" height="400px"/>
<img class="images" id="image5" alt="Image loop" src="image5.jpg" width="550px" height="400px"/>
</div>
<div id="name">
<div class="name" id="name1">
<img src="image1.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name2">
<img src="image2.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name3">
<img src="image3.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name4">
<img src="image4.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name5">
<img src="image5.jpg" width="80px" height="80px"/>
</div>
css控制右侧的名称集。我的想法是,点击右边的小图片立即切换用户选择的图像。 它似乎有点工作。 setInterval仍然在运行并且循环被破坏。我该如何正确处理? Here is the jsfiddle link.谢谢!
答案 0 :(得分:2)
您可以阻止setInterval
与clearInterval
一起投放。具体来说,您需要在setInterval
的返回值上调用它。
var interval = setInterval(...
clearInterval(interval);
编辑:这不适用于您的问题。你可以做的只是创建一个单独的函数来回调setInterval
。然后,还将该函数作为回调click事件的一部分。是否要清除间隔(停止动画)取决于你。
答案 1 :(得分:1)
这是一个简单的工作示例
var interval;
var times;
function doSomething() {
if (times == 100) {
// Unset the interval:
clearInterval(interval);
} else {
alert("Hey");
times++;
}
}
// Initialize interval:
interval = setInterval(doSomething, 1000);
答案 2 :(得分:1)
出现此问题是因为您将计数的类型从数字更改为单击处理程序中的字符串 - 当您将名称分配给计数。我已经编辑了你的代码以包含parseInt。
$('.name').click(function(){
var name = $(this).attr('id');
name = name.replace('name', '');
count = parseInt(name, 10);
});