Javascript jquery问题：如何中断和重置setinterval？

我使用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仍在运行，循环被破坏。我怎样才能妥善处理这件事？谢谢

您可以停止使用

clearInterval

运行

setInterval

。具体来说，您需要在返回值

setInterval

时调用它

var interval = setInterval(...
clearInterval(interval);

---

编辑：这并不直接适用于您的问题。您所能做的只是创建一个单独的函数来回调

setInterval

。然后，也调用该函数作为click事件回调的一部分。是否要清除间隔（停止动画）取决于您。

您可以停止使用

clearInterval

运行

setInterval

。具体来说，您需要在返回值

setInterval

时调用它

var interval = setInterval(...
clearInterval(interval);

---

编辑：这并不直接适用于您的问题。您所能做的只是创建一个单独的函数来回调

setInterval

。然后，也调用该函数作为click事件回调的一部分。是否要清除间隔（停止动画）取决于您。

下面是一个简单的工作示例

var interval;
var times;

function doSomething() {
    if (times == 100) {
        // Unset the interval:
        clearInterval(interval);
    } else {
        alert("Hey");
        times++;
    }
}

// Initialize interval:
interval = setInterval(doSomething, 1000);

---

下面是一个简单的工作示例

var interval;
var times;

function doSomething() {
    if (times == 100) {
        // Unset the interval:
        clearInterval(interval);
    } else {
        alert("Hey");
        times++;
    }
}

// Initialize interval:
interval = setInterval(doSomething, 1000);

---

出现此问题的原因是，在为计数指定名称时，在单击处理程序中将计数类型从数字更改为字符串。我已经编辑了您的代码以包含parseInt

    $('.name').click(function(){
    var name = $(this).attr('id');
    name = name.replace('name', '');
    count = parseInt(name, 10);  
});

---

出现此问题的原因是，在为计数指定名称时，在单击处理程序中将计数类型从数字更改为字符串。我已经编辑了您的代码以包含parseInt

    $('.name').click(function(){
    var name = $(this).attr('id');
    name = name.replace('name', '');
    count = parseInt(name, 10);  
});

---

当我点击小图像时，我做了一个clearInterval，循环停止了。在clearInterval之后，我立即再次调用setInterval，但它不起作用：（我在单击小图像时执行了clearInterval，循环停止。在clearInterval之后，我立即再次调用setInterval，但它不起作用：(