Получение слайдера изображений для автоматического воспроизведения
Я пытаюсь заставить свой собственный слайдер изображений автоматически воспроизводиться с интервалом 4000 миллисекунд. Я пытался использовать setTimeout , но я не могу заставить его работать. Буду признателен, если кто-нибудь сможет мне помочь. Вот пример слайдера:
http://www.matthewruddy.com/slider-intervalissue/
Есть какие-нибудь идеи, как заставить его автоматически воспроизводиться?
Вот код jQuery:
$(document).ready(function(){
var images = $('.slider li');
var slides = images.length;
var sliderwidth = 500;
var currentimage = 0;
var containerwidth = sliderwidth*slides;
var autoplay = 4000;
$('.slider').css('width', containerwidth);
$('#next').bind('click',nextimage);
function nextimage(){
if(currentimageСпасибо, Мэтью
1 ответ
Я смог настроить автовоспроизведение, которое работает довольно хорошо, используя комбинацию setTimeout и рекурсии.
Я задал функции nextimage() параметр autoplay, который представляет собой булево значение. Затем я добавил следующую строку в конце функции:
if (autoplay) { setTimeout(function() { nextimage(true); }, 4000); }
Наконец, я добавил эту строку в конце скрипта, чтобы запустить цикл автовоспроизведения:
setTimeout(function() { nextimage(true); }, 4000);
Посмотрите демо здесь, построенное в основном из того, что вы предоставили, с некоторыми изменениями для автовоспроизведения: http://jsfiddle.net/bVjkP/
Короче говоря, вы передаете булево значение в функцию nextimage(), чтобы сказать ей, начинать ли автовоспроизведение. Затем вы просто вызываете начальный setTimeout, чтобы запустить процесс. Хитрость этого метода заключается в том, что через setTimeout нужно вызвать анонимную функцию, которая вызывает функцию nextimage с autoplay, установленным в true, поскольку при вызове функции с setTimeout нельзя передавать параметры. Это похоже на метод привязки функций к таким событиям, как click или hover, с помощью jQuery.