有没有办法让这个幻灯片自动移动？ [英] Is there a way to make this slideshow move automatically?

问题描述

这是我们使用的幻灯片：

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

这是JS档案：

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

但是，这个幻灯片没有设置，图像自动。你还需要点击下面的数字才能看到图像。有人知道要添加到JavaScript代码，以使它通过每个图像自动吗？

谢谢！

解决方案

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

  var SlideChanger = function（seconds_each）{
 var index = -1; 
 //在第一个周期，索引将设置为0以下
 var maxindex =（$（。change_link）。 
 //有多少总幻灯片（计算幻灯片按钮）
 var timer = function（）{
 //这是SlideChanger返回的函数
 var logic = function （）{
 //这是一个内部函数，它使用
 //封闭的值（index和maxindex）循环浏览幻灯片
 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）; //这是什么改变幻灯片
 setTimeout（logic，1000 * seconds_each）; 
 //调度自己在未来运行
} 
 logic（）; //获取球滚动
} 
 return timer; //给调用者函数
} 
 
 SlideChanger（5）（）; //在每个幻灯片的5秒处获取函数并运行它
  

（ SlideChanger ）的函数之外的内部函数 timer 。此函数（ timer ）可以访问 SlideChanger （ index 和 maxindex ）。

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

调用时，返回函数调用 logic 然后， logic 通过调度自身在每次运行时将来运行，无限期重复。<​​/ p>

，我们使用数字参数 x 调用 SlideChanger 。它返回一个函数，在被调用后，将改变每个 x 秒的幻灯片。

相同的概念。

 （function（seconds_each）{
 var index = -1; 
 //在第一个周期，索引将被设置为零
 var maxindex =（$（。change_link）。length） -  1; 
 //有多少总幻灯片）
 return function（）{
 //这是SlideChanger返回的函数
 var logic = function（）{
 //这是一个内部函数，使用
 //封闭的值（index和maxindex）循环浏览幻灯片
 if（index == maxindex）
 index = 0; //重置为第一张幻灯片
 else 
 index ++; // goto下一张幻灯片，在第一个周期将索引设置为零
 $（'。slideshow'）。blinds_change（index）; //这是什么改变幻灯片
 setTimeout seconds_each）; 
 //调度自己以后运行
} 
 logic（）; //获取球滚动
} 
}）（5）（）; //在每个幻灯片的5秒处获取函数并运行它
  

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

This is the slideshow that we used:

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

and this is the JS file:

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

However, this slideshow doesn't have a setting that makes it go through each image automatically. You still have to click on the numbers below it to see the images. Does anybody know what to add into the javascript code to make it go through each image automatically?

Thanks!

解决方案

This solution uses closures and recursion.

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

What we are doing here is exposing the inner function timer outside of the function in which it was defined (SlideChanger). This function (timer) has access to the variables defined inside of SlideChanger (index and maxindex).

Now that we have set up the variables in the enclosing environment and a function to return to the caller, we can set up the logical engine in logic. When logic is run, it uses index and maxindex to determine which slide should be shown next, shows the slide, and schedules itself to be run again in the future.

When called, the returning function calls logic to get the ball rolling. Then logic repeats indefinitely by scheduling itself to run in the future each time it is run.

So, to summarize, we call SlideChanger with a numeric argument x. It returns a function that, after being called, will change the slide every x seconds.

Another way to write the same concept.

(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 is a nice language with many functional programming constructs such as higher order functions (functions that either create functions or accept functions as parameters) and anonymous functions. For more info see http://www.ibm.com/developerworks/web/library/wa-javascript.html

这篇关于有没有办法让这个幻灯片自动移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！