Question

我按照教程编写了一个简单的手动循环幻灯片。我尝试制作它，即使没有点击上一个/下一个按钮，它也会自动更改幻灯片。我尝试了一种粗略的方法，在＆＃34; next＆＃34;之间设置自动点击事件之间的延迟。按钮但由于某种原因它只点击一次并停止。我的知识非常有限，无法弄清楚，任何输入都是值得赞赏的。到目前为止这是脚本：

$(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

这是让它自动滑动的方法...
但是，如果用户点击prev / next，它会保留定义的“空闲”时间的自动功能。

点击处理程序需要添加两行：

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);

Answer 2

var break_auto_slide = false;
function auto_silde()
{
    if(break_auto_slide)
    {
        break_auto_slide = false;
        return;
    }
    slide(slide_index + 1);
    setTimeout(auto_silde,1000 /* time in ms*/);
}

setTimeout将在指定的超时时间内以毫秒为单位调用该函数。

变量break_auto_slide - 将其设置为true以停止自动幻灯片。下次调用该函数时，它将返回而不设置新的计时器，并将重置此变量，以便再次打开自动模式。

将手动幻灯片转换为自动

2 个答案: