главная

Теги:


Как сделать автопроигрывание на слайдшоу

Иногда, по замыслу дизайна проекта нужно, чтобы слайдшоу на какой-нибудь странице автоматически меняло картинки. Однако такая опция доступна не во всех замечательных плагинах для демонстрации картинок. Между тем, добавить функционал автопроигрывания практически к любому слайдшоу очень просто. В данном уроке мы расширим возможности слайдшоу из урока "Слайдшоу с использованием элемента HTML5 canvas" с помощью нескольких строк кода JavaScript (jQuery).

Идея

Слайдшоу из урока "Слайдшоу с использованием элемента HTML5 canvas" уже имеет элементы навигации "предыдущее/следующее". Так что мы сделаем функцию JavaScript, которая буде выполняться через определенные промежутки времени и генерировать событие" click" для стрелки "следующее". С помощью jQuery можно имитировать любое событие для любого элемента, используя метод trigger():

$('#nextArrow').bind('click',function(){
	    alert("Нажато!");
	});
	 
	$('#nextArrow').trigger('click');
	 
	// или другой вариант:
	// $('#nextArrow').click();

Выше приведенный код запустит обработчик события click, который выведет сообщение. В случае со слайдшоу, нам не нужно беспокоиться о том, что происходит внутри и как осуществляется анимация. Мы просто имитируем событие сlick. Таким образом, скрипт, который расширяет функционал, может быть внешним, отдельным файлом. Комбинируя описанную технику с функцией JavaScript setTimeout() мы получаем инструмент, который имеет все необходимое для автоматического проигрывания слайдшоу.


Реализация

Принимая во внимание все выше сказанное, пишем код.
autoadvance.js

$(window).load(function(){
	 
	    // Событие window.load гарантирует, что все изображения
	    // будут загружены прежде, чем автопроигрывание начнет действовать.
	     
	    var timeOut = null;
	 
	    $('#slideshow .arrow').click(function(e,simulated){
	         
	        // Параметр simulated устанавливается методом trigger
	                 
	        if(!simulated){
	             
	            // Произошло реальное событие click. Сбрасываем таймер.
	                         
	            clearTimeout(timeOut);
	        }
	    });
	 
	    // Самовыполняющаяся функция:
	     
	    (function autoAdvance(){
	         
	        // Имитация события click на кнопке "следующий".
	        $('#slideshow .next').trigger('click',[true]);
	         
	        // Устанавливаем таймер на 2 секунды.
	        timeOut = setTimeout(autoAdvance,2000);    
       })();
	 
	});


Как использовать

Для использования скрипта в ваших проектах нужно просто заменить селектор для элемента навигации "следующий" на строке 25 и селектор для обоих элементов навигации "предыдущий/следующий" на строке 8. С такими модификациями можно использовать скрипт практически с любым слайдшоу (а в действительности, с любым типом презентации) на вашем сайте, просто включив файл autoadvance.js с помощью тега script.


Источник урока: http://tutorialzine.com/2011/01/how-to-make-auto-advancing-slideshows/

Урок Создан:2011-02-04 Просмотров:2398

Добавить комментарий:


Copyright© 2009 Hosted by Zhost