当我们使用JavaScript点击下一个或上一个按钮时，图像幻灯片播放计时器的速度会加快

Question

我已经使用JavaScript编写了简单的图像滑块。在这方面，我设置了5000毫秒的定时器自动滑动。但当我们点击下一个或上一个按钮时，它会增加。我已经在下面粘贴了代码

HTML代码：

    <section id="intro">
        <div id="prev"><br/><br/><br/><br/><img onclick="rotateImages(0);" src="./images/slider/prev1.png"/></div>
        <div id="next"><img onclick="rotateImages(1);" src="./images/slider/next1.png"/></div>
    </section>

JavaScript代码：

    <script type="text/javascript">
        var num = 0;
        var temp = 0;
        var speed = 5000;
        var preloads = [];
        preload(
                '1.png',
                '2.jpg',
                '3.jpg',
                '4.jpg',
                '5.png'
                );
        function preload() {
            for (var c = 0; c < arguments.length; c++) {
                preloads[preloads.length] = new Image();
                preloads[preloads.length - 1].src = arguments[c];
            }
        }
        function rotateImages(flag) {
            if (flag == 0)
            {
                num = num - 1;
                if (num < 0)
                    num = preloads.length;
            }
            else
            {
                num = num + 1;
                if (num >= preloads.length)
                    num = 0;
            }
            if (num == temp) {
                rotateImages(1);
            } else {
                var str = preloads[num].src;
                var resArr = str.split("/");
                var picName = resArr[resArr.length - 1];
                document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
                temp = num;
                setTimeout(function () {
                    rotateImages(1)
                }, speed);
            }
        }
        if (window.addEventListener) {
            window.addEventListener('load', function () {
                setTimeout(function () {
                    rotateImages(1)
                }, speed)
            }, false);
        } else {
            if (window.attachEvent) {
                window.attachEvent('onload', function () {
                    setTimeout(function () {
                        rotateImages(1)
                    }, speed)
                });
            }
        }
    </script>

Answer 1

您需要清除上一个计时器。否则，每次调用rotateImages（）都会添加新的计时器，保存从setTimeout（）返回的引用，然后如果计时器设置为，则使用clearTimeout（

var num = 0;
var temp = 0;
var speed = 5000;
var preloads = [];
var timeout;
preload(
  '1.png',
  '2.jpg',
  '3.jpg',
  '4.jpg',
  '5.png'
);
function preload() {
  for (var c = 0; c < arguments.length; c++) {
    preloads[preloads.length] = new Image();
    preloads[preloads.length - 1].src = arguments[c];
  }
}
function rotateImages(flag) {
  if (flag == 0) {
    num = num - 1;
    if (num < 0)
      num = preloads.length;
  } else {
    num = num + 1;
    if (num >= preloads.length)
      num = 0;
  }
  if (num == temp) {
    rotateImages(1);
  } else {
    var str = preloads[num].src;
    var resArr = str.split("/");
    var picName = resArr[resArr.length - 1];
    document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
    temp = num;
    if (!!timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
      rotateImages(1);
    }, speed);
  }
}
if (window.addEventListener) {
  window.addEventListener('load', function() {
    setTimeout(function() {
      rotateImages(1)
    }, speed)
  }, false);
} else {
  if (window.attachEvent) {
    window.attachEvent('onload', function() {
      setTimeout(function() {
        rotateImages(1)
      }, speed)
    });
  }
}