Question

我有一个简单的图像滑块，我从互联网上下来。我根本不了解JQuery，只是通过阅读我的代码而理解的内容。该代码有一个图像滑块，每8秒前进一次，并有两个按钮，可以在点击时向前或向后推进图像。我的问题是，当我点击按钮前进时，8秒计时器不会重置，这样如果我点击间隔6秒，图像会在2秒后进入第三张图像。附件是我的JQuery代码。我尝试将setInterval添加到moveLeft()和moveRight()函数，但它无法正常工作。对于我缺乏JQuery知识而感到抱歉，我在学校学到了基本的JavaScript，并且从那时起就没有用过多少。{附上我现在的代码。

jQuery(document).ready(function ($) {


    setInterval(function () {
        moveRight();
    }, 8000);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 1000, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 1000, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();

        setInterval(function () {
        moveRight();
    }, 8000);

    });

    $('a.control_next').click(function () {
        moveRight();

        setInterval(function () {
        moveRight();
    }, 8000);

    });
});

Answer 1

您遇到此问题的原因是，无论何时创建新的Interval for right right，您之前的时间间隔仍然存在。我建议您通过具有取消和重新初始化的专用功能来确保您只有一个Interval：

var slideInterval = setInterval(function() {
  moveRight();
}, 8000);

function resetInterval() {
  clearInterval(slideInterval);
  slideInterval = setInterval(function() {
    moveRight();
  }, 8000);
}

然后，只需点击即可调用此功能：

$('a.control_prev').click(function() {
  moveLeft();
  resetInterval();
});

$('a.control_next').click(function() {
  moveRight();
  resetInterval();
});

重置图像上的间隔

1 个答案: