Question

这是我们使用的幻灯片：

http://www.littlewebthings.com/projects/blinds/

这是JS文件：

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

但是，此幻灯片显示没有使其自动浏览每个图像的设置。您仍然必须单击它下面的数字才能看到图像。有人知道要添加到javascript代码中的内容，以使其自动浏览每个图像吗？

谢谢！

Answer 1

此解决方案使用闭包和递归。

var SlideChanger = function(seconds_each) {
  var index = -1; 
  // on the first cycle, index will be set to zero below
  var maxindex = ($(".change_link").length) - 1; 
  // how many total slides are there (count the slide buttons)
  var timer = function() { 
  // this is the function returned by SlideChanger
    var logic = function() { 
    // this is an inner function which uses the 
    // enclosed values (index and maxindex) to cycle through the slides
      if (index == maxindex) 
        index = 0; // reset to first slide
      else
        index++; // goto next slide, set index to zero on first cycle
      $('.slideshow').blinds_change(index); // this is what changes the slide
      setTimeout(logic, 1000 * seconds_each); 
      // schedule ourself to run in the future
    }
    logic(); // get the ball rolling
  }
  return timer; // give caller the function
}

SlideChanger(5)(); // get the function at five seconds per slide and run it

我们在这里做的是将内部函数timer暴露在定义它的函数之外（SlideChanger）。此函数（timer）可以访问SlideChanger（index和maxindex）内定义的变量。

现在我们已经在封闭环境中设置了变量并且函数返回到调用者，我们可以在logic中设置逻辑引擎。运行logic时，它会使用index和maxindex来确定下一张应显示哪张幻灯片，显示幻灯片，并安排自己将来再次投放。

当被调用时，返回函数调用logic以使球滚动。然后logic无限期地重复，通过安排自己在每次运行时运行。

因此，总而言之，我们使用数字参数SlideChanger调用x。它返回一个函数，在被调用之后，它将每隔x秒更改一次幻灯片。

编写相同概念的另一种方法。

(function(seconds_each) {
  var index = -1; 
  // on the first cycle, index will be set to zero below
  var maxindex = ($(".change_link").length) - 1; 
  // how many total slides are there (count the slide buttons)
  return function() { 
  // this is the function returned by SlideChanger
    var logic = function() { 
    // this is an inner function which uses the 
    // enclosed values (index and maxindex) to cycle through the slides
      if (index == maxindex) 
        index = 0; // reset to first slide
      else
        index++; // goto next slide, set index to zero on first cycle
      $('.slideshow').blinds_change(index); // this is what changes the slide
      setTimeout(logic, 1000 * seconds_each); 
      // schedule ourself to run in the future
    }
    logic(); // get the ball rolling
  }
})(5)(); // get the function at five seconds per slide and run it

JavaScript是一种很好的语言，具有许多函数式编程结构，例如高阶函数（创建函数或接受函数作为参数的函数）和匿名函数。有关详细信息，请参阅http://www.ibm.com/developerworks/web/library/wa-javascript.html

Answer 2

ecounysis的解决方案可行，但它不必要地复杂化。这是一个更简单的方法，使用setInterval，modulo，而不是将它包装在一个额外的函数中：

function startSlideshow(ms) {
    var index = -1;
    var count = $(".change_link").length - 1;
    return setInterval(function() {
        index = (index + 1) % count;
        $('.slideshow').blinds_change(index);
    }, ms);
}

Answer 3

在快速浏览源代码后，我没有看到用于自动推进幻灯片的内置API。但是，您可以使用另一种幻灯片，如下所示：

http://jquery.malsup.com/cycle/

Answer 4

您只需要在其上包含一个计时器并调用blinds_change事件。这对我有用。

有没有办法让这个幻灯片自动移动？

4 个答案: