В разработку слайд-шоу на JavaScript Разработка веб-сайтов

div class="slider-wrapper">внутренний враппер -->
<div class="slide">
<iframe src="https://player.vimeo.com/video/109608341?title=0&byline=0&portrait=0" width="1024" height="626" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>iframe>
div>
<div class="slide">
<iframe src="https://player.vimeo.com/video/102570343?title=0&byline=0&portrait=0" width="1024" height="576" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>iframe>
div>
<div class="slide">
<iframe src="https://player.vimeo.com/video/97620325?title=0&byline=0&portrait=0" width="1024" height="576" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>iframe>
div>
div>

Видео включаются через iframe. Это такой же заменяемый inline-block, как и картинка. Заменяемый – потому, что содержимое взято из внешнего источника.

Чтобы создать полностраничное слайд-шоу, надо поменять стили следующим образом:



html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%; /* Высота должна быть со всю страницу */
}
.slider {
width: 100%;
overflow: hidden;
height: 100%;
min-height: 100%; /* Высота и ширина на полную */
position: absolute; /* Абсолютное позиционирование */
}


.slider-wrapper {
width: 100%;
height: 100%; /* Высота и ширина на полную */
position: relative;
}


.slide {
float: left;
position: absolute;
width: 100%;
height: 100%;
}


.slide iframe {
display: block; /* Блочный элемент */
position: absolute; /* Абсолютное позиционирование */
width: 100%;
height: 100%; /* Высота и ширина на полную */
}




Примеры

jQuery: слайд-шоу с видео на всю страницу
JavaScript: слайд-шоу с видео на всю страницу



Автоматические слайд-шоу

Автоматические слайд-шоу используют таймеры. При каждом обратном вызове функции по таймеру setInterval() курсор будет увеличиваться на 1 и таким образом будет выбираться следующий слайд.

Когда курсор достигнет максимального количества слайдов, его надо обнулить.

Бесконечные слайд-шоу быстро надоедают пользователям. Лучше всего останавливать анимацию, когда пользователь наводит на неё курсор мыши, и восстанавливать, когда курсор уходит.

На jQuery:

(function( $ ) {
$.fn.slideshow = function( options ) {
options = $.extend({
slides: ".slide",
speed: 3000,
easing: "linear"

}, options);

var timer = null; // Таймер
var index = 0; // Курсор

var slideTo = function( slide, element ) {
var $currentSlide = $( options.slides, element ).eq( slide );

$currentSlide.stop( true, true ).
animate({
opacity: 1
}, options.speed, options.easing ).
siblings( options.slides ).
css( "opacity", 0 );

};

var autoSlide = function( element ) {
// Инициализируем последовательность
timer = setInterval(function() {
index++; // Увеличим курсор на 1
if( index == $( options.slides, element ).length ) {
index = 0; // Обнулим курсор
}
slideTo( index, element );
}, options.speed); // Тот же интервал, что и в методе .animate()
};

var startStop = function( element ) {
element.hover(function() { // Останавливаем анимацию
clearInterval( timer );
timer = null;
}, function() {
autoSlide( element ); // Возобновляем анимацию
});
};

return this.each(function() {
var $element = $( this );

autoSlide( $element );
startStop( $element );

});
};

})( jQuery );

Оба параметра метода .stop() установлены в true, т.к. нам не нужно создавать очередь анимации из нашей последовательности.

На чистом JS код становится проще. Регистрируем переход CSS для каждого слайда с определённой длительности:



.slide {
transition: opacity 3s linear; /* 3 секунды = 3000 миллисекунд */
}

И код будет следующим:

(function() {

function Slideshow( element ) {
this.el = document.querySelector( element );
this.init();
}

Slideshow.prototype = {
init: function() {
this.slides = this.el.querySelectorAll( ".slide" );
this.index = 0; // Курсор
this.timer = null; // Таймер

this.action();
this.stopStart();
},
_slideTo: function( slide ) {
var currentSlide = this.slides[slide];
currentSlide.style.opacity = 1;

for( var i = 0; i < this.slides.length; i++ ) {
var slide = this.slides[i];
if( slide !== currentSlide ) {
slide.style.opacity = 0;
}
}
},
action: function() {
var self = this;
// Initializes the sequence
self.timer = setInterval(function() {
self.index++; // Увеличим курсор на 1
if( self.index == self.slides.length ) {
self.index = 0; // Обнулим курсор
}
self._slideTo( self.index );

}, 3000); // Тот же интервал, что и у перехода CSS
},
stopStart: function() {
var self = this;
// Останавливаем анимацию
self.el.addEventListener( "mouseover", function() {
clearInterval( self.timer );
self.timer = null;

}, false);
// Возобновляем анимацию
self.el.addEventListener( "mouseout", function() {
self.action();

}, false);
}


};
})();




Примеры

jQuery: автоматическое слайд-шоу
JavaScript: автоматическое слайд-шоу



Навигация с клавиатуры

Продвинутые слайд-шоу предлагают управление с клавиатуры, т.е. перелистывание слайдов по нажатию клавиш. Для нас это просто означает необходимость регистрации обработки события нажатия на клавиши.

Для этого мы обратимся к свойству keyCode объекта event. Оно возвращает код нажатой клавиши (список кодов).

Те события, что мы прикрепляли на кнопки "Предыдущий" и "Следующий", теперь можно прикрепить на клавиши "влево" и "вправо". jQuery :



$( "body" ).on( "keydown", function( e ) {
var code = e.keyCode;
if( code == 39 ) { // Стрелка влево
$next.trigger( "click" );
}
if( code == 37 ) { // Стрелка вправо
$previous.trigger( "click" );
}

});


На чистом JS вместо простого метода .trigger() придётся пользоваться dispatchEvent():



document.body.addEventListener( "keydown", function( e ) {
var code = e.keyCode;
var evt = new MouseEvent( "click" ); // нажатие мыши

if( code == 39 ) { // Стрелка влево
self.next.dispatchEvent( evt );
}
if( code == 37 ) { // Стрелка вправо
self.previous.dispatchEvent( evt );
}

}, false);

В приличных проектах так делать не принято. Нам надо было бы задать функциональность, которая обеспечивает перелистывание, в публичном методе, и затем вызывать его по клику на кнопке. Тогда если бы в другой части программы необходимо было бы реализовать эту функциональность, не пришлось бы эмулировать события DOM, а можно было бы просто вызвать этот метод.

Примеры

jQuery: слайд-шоу с управлением с клавиатуры
JavaScript: слайд-шоу с управлением с клавиатуры



Обратные вызовы

Было бы неплохо уметь прикреплять к любому действию слайд-шоу некоторый код, который бы выполнялся, когда это действие производится. В этом и состоит назначение функций обратного вызова – они выполняются только, когда происходит определённое действие. Допустим, у нашего слайд-шоу есть подписи и они по умолчанию скрыты. В момент анимации нам надо показать подпись для текущего слайда или даже что-нибудь сделать с ним.

В jQuery можно создать обратный вызов так:

(function( $ ) {
$.fn.slideshow = function( options ) {
options = $.extend({
//...
callback: function() {}

}, options);

var slideTo = function( slide, element ) {
var $currentSlide = $( options.slides, element ).eq( slide );

$currentSlide.
animate({
opacity: 1
}, options.speed,
options.easing,
// Обратный вызов для текущего слайда
options.callback( $currentSlide ) ).
siblings( options.slides ).
css( "opacity", 0 );

};


//...
};
})( jQuery );

В этом случае обратный вызов – это функция из .animate(), которая принимает текущий слайд как аргумент. Вот, как это можно использовать:

$(function() {
$( "#main-slider" ).slideshow({
callback: function( slide ) {
var $wrapper = slide.parent();
// Показывает текущую подпись и прячет остальные
$wrapper.find( ".slide-caption" ).hide();
slide.find( ".slide-caption" ).show( "slow" );
}

});
});


На чистом JS:



(function() {

function Slideshow( element, callback ) {
this.callback = callback || function() {}; // Our callback
this.el = document.querySelector( element );
this.init();
}

Slideshow.prototype = {
init: function() {
//...
this.slides = this.el.querySelectorAll( ".slide" );
//...

//...
},
_slideTo: function( slide ) {
var self = this;
var currentSlide = self.slides[slide];
currentSlide.style.opacity = 1;

for( var i = 0; i < self.slides.length; i++ ) {
var slide = self.slides[i];
if( slide !== currentSlide ) {
slide.style.opacity = 0;
}
}
setTimeout( self.callback( currentSlide ), 500 );
// Вызывает функцию по окончанию перехода
}

};
//
})();

Функция обратного вызова определена как второй параметр конструктора. Использовать её можно так:

document.addEventListener( "DOMContentLoaded", function() {

var slider = new Slideshow( "#main-slider", function( slide ) {
var wrapper = slide.parentNode;

// Показывает текущую подпись и прячет остальные

var allSlides = wrapper.querySelectorAll( ".slide" );
var caption = slide.querySelector( ".slide-caption" );
caption.classList.add( "visible" );

for( var i = 0; i < allSlides.length; ++i ) {
var sld = allSlides[i];
var cpt = sld.querySelector( ".slide-caption" );
if( sld !== slide ) {
cpt.classList.remove( "visible" );
}
}


});

});




Примеры

jQuery: слайд-шоу с функциями обратного вызова
JavaScript: слайд-шоу с функциями обратного вызова



Внешние API

Пока наш сценарий работы прост: все слайды уже есть в документе. Если нам надо вставлять в него данные снаружи (YouTube, Vimeo, Flickr), нам нужно на лету заполнять слайды по мере получения внешнего контента.

Так как ответ со стороннего сервера может быть не немедленным, надо вставлять анимацию загрузки, чтобы показать, что процесс идёт:

<