简易js轮播图自动播放

简易JS轮播图的自动播放可以通过设置一个定时器来实现。定时器的周期就是轮播图的播放间隔时间。具体的实现步骤如下：

1. 首先，需要定义一个变量来存储定时器的引用，比如`timer`。

2. 创建一个函数，命名为`startTimer()`，在这个函数中设置定时器。定时器的回调函数用来执行轮播图的切换操作。

3. 在定时器的回调函数中，通过计算得到下一张图片的目标位置。可以通过获取当前图片的位置，并减去每次切换的距离来得到目标位置。

4. 判断目标位置是否是最后一张图片，如果是，则需要将容器的位置重置为第一张图片的位置，然后再执行切换操作。这样可以实现循环播放。

5. 在执行切换操作之前，需要解绑轮播图的前一张和后一张的点击事件，以防止快速切换导致混乱。

6. 调用动画函数来实现平滑的切换效果。在动画结束后，重新绑定轮播图的前一张和后一张的点击事件。

7. 最后，根据所需的播放间隔时间，设置定时器的周期，将轮播图自动播放的函数`startTimer()`放入定时器中。

下面是一个示例代码，用来实现简易JS轮播图的自动播放：

var timer = null; // 定时器引用

function startTimer() {
  timer = setInterval(function() {
    var target = parseInt(container.css("left")) - 311;
    if (target != -2799) {
      btn_pre.unbind("click", display_pre);
      btn_next.unbind("click", display_next);
      animate(container, target, function() {
        btn_pre.bind("click", display_pre);
        btn_next.bind("click", display_next);
      });
    } else {
      btn_pre.unbind("click", display_pre);
      btn_next.unbind("click", display_next);
      animate(container, target, function() {
        container.css("left", "-933px");
        btn_pre.bind("click", display_pre);
        btn_next.bind("click", display_next);
      });
    }
  }, 1800);
}

你可以根据具体的轮播图实现，将上述代码中的变量和函数名替换为你自己的代码中相应的变量和函数名。这样就可以实现简易JS轮播图的自动播放了。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>