Есть ли способ заставить это слайд-шоу двигаться автоматически? - PullRequest
2 голосов
/ 25 ноября 2010

Это слайд-шоу, которое мы использовали:

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

и это файл JS:

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

Однако,это слайд-шоу не имеет настройки, которая заставляет его автоматически просматривать каждое изображение.Вам все еще нужно нажать на цифры под ним, чтобы увидеть изображения.Кто-нибудь знает, что добавить в код JavaScript, чтобы он автоматически проходил через каждое изображение?

Спасибо!

Ответы [ 4 ]

12 голосов
/ 25 ноября 2010

Это решение использует замыкания и рекурсию.

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

4 голосов
/ 25 ноября 2010

решение 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);
}
0 голосов
/ 25 ноября 2010

Все, что вам нужно, это включить таймер и вызвать событие blinds_change. Это работает для меня.

0 голосов
/ 25 ноября 2010

После быстрого сканирования источника я не увидел встроенного API для автоматического продвижения слайдов.Тем не менее, вы можете использовать альтернативное слайд-шоу, например:

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

...