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

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 

我们这里做的是暴露出它被定义的函数（SlideChanger）的内部函数timer之外。该功能（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

在对源代码进行快速扫描后，我没有看到用于自动推进幻灯片的内置API。但是，你可以使用一个替代幻灯片，像这样的：

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

Answer 3

所有你需要的是包括一个计时器，并调用blinds_change事件。这对我行得通。

Answer 4

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