javascript - 将手动幻灯片转换为自动幻灯片

Question

我按照教程创建了一个简单的手动循环幻灯片。我正在尝试做到这一点，即使未单击上一页/下一页按钮，它也会自动更改幻灯片。我尝试了一种粗略的方法，在“下一步”按钮上的自动单击事件之间设置延迟，但由于某种原因，它只单击一次并停止。我的js知识非常有限，无法弄清楚，任何输入表示赞赏。这是到目前为止的脚本:

$(function() {

  var ul = $(".slider ul");
  var slide_count = ul.children().length;
  var slide_width_pc = 100.0 / slide_count;
  var slide_index = 0;

  var first_slide = ul.find("li:first-child");
  var last_slide = ul.find("li:last-child");

  last_slide.clone().prependTo(ul);

  first_slide.clone().appendTo(ul);

  ul.find("li").each(function(indx) {
    var left_percent = (slide_width_pc * indx) + "%";
    $(this).css({"left":left_percent});
    $(this).css({width:(100 / slide_count) + "%"});
  });

  ul.css("margin-left", "-100%");

  $(".slider .prev").click(function() {
    console.log("prev button clicked");
    slide(slide_index - 1);
  });

  $(".slider .next").click(function() {
    console.log("next button clicked");
    slide(slide_index + 1);
  });

  function slide(new_slide_index) {

    var margin_left_pc = (new_slide_index * (-100) - 100) + "%";

    ul.animate({"margin-left": margin_left_pc}, 400, function() {

      if(new_slide_index < 0) {
        ul.css("margin-left", ((slide_count) * (-100)) + "%");
        new_slide_index = slide_count - 1;
      }
      else if(new_slide_index >= slide_count) {
        ul.css("margin-left", "-100%");
        new_slide_index = 0;
      }

      slide_index = new_slide_index

    });

  }

});

Answer 1

这是一种让它自动滑动的方法......
但是，如果用户单击上一个/下一个，它会在定义的“空闲”时间内保留自动功能。

需要将两行添加到您的点击处理程序中:

var autoEnabled = true;               // ADDED

$(".slider .prev").click(function() {
  console.log("prev button clicked");
  slide(slide_index - 1);
  autoEnabled = false;                // ADDED
  disabledCount = 0;                  // ADDED
});

$(".slider .next").click(function() {
  console.log("next button clicked");
  slide(slide_index + 1);
  autoEnabled = false;                // ADDED
  disabledCount = 0;                  // ADDED
});

这是为了循环滑动或检查它是否可以自行重新启用。

// ----------------- Automatic sliding interval with "idle time" to re-enable on user click

var idleTime = 5000;        // Time without manual click to re-enable automatic sliding.
var autoSlideDelay = 1000;  // Time between each slide when automatic.
var disabledCount = 0;

var autoSlide = setInterval(function(){

  if(autoEnabled || disabledCount >= idleTime/autoSlideDelay ){
    disabledCount = 0;
    autoEnabled = true;
    slide(slide_index + 1);
  }else{
    disabledCount++;
  }
},autoSlideDelay);