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

div class="slider" id="main-slider">
<div class="slider-wrapper">внутренний враппер -->

<div class="slide" id="slide-1" data-image="image1.jpg">div>
<div class="slide" id="slide-2" data-image="image2.jpg">div>
<div class="slide" id="slide-3" data-image="image3.jpg">div>
div>
<div class="slider-nav">
<button type="button" class="slider-previous">Предыдущийbutton>
<button type="button" class="slider-next">Следующийbutton>
div>
ссылки на страницы -->
<div class="slider-pagination">
<a href="#slide-1">1a>
<a href="#slide-2">2a>
<a href="#slide-3">3a>
div>
div>

Отметим использование атрибутов «data» – некоторые слайд-шоу умеют вставлять картинки как фон, и эти атрибуты будут использованы в скрипте как места для связи фона и слайда.

Использование списков

Семантически верным подходом будет использование элементов списка как слайдов. В этом случае структура будет такой:

<ul class="slider-wrapper">
<li class="slide" id="slide-1">...li>слайды -->
<li class="slide" id="slide-2">...li>
<li class="slide" id="slide-3">...li>
ul>

Если порядок слайдов хорошо определён (к примеру, в презентации), можно использовать нумерованные списки

CSS



Начнём со следующей структуры:





<div class="slider" id="main-slider">самый внешний контейнер -->
<div class="slider-wrapper">внутренний враппер -->
<img src="image1.jpg" alt="First" class="slide" />
<img src="image2.jpg" alt="Second" class="slide" />
<img src="image3.jpg" alt="Third" class="slide" />
div>
<div class="slider-nav">
<button type="button" class="slider-previous">Предыдущийbutton>
<button type="button" class="slider-next">Следующийbutton>
div>
div>

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

.slider {
width: 1024px;
overflow: hidden;
}


.slider-wrapper {
width: 9999px;
height: 683px;
position: relative;
transition: left 500ms linear;
}

Стили внутреннего враппера включают:

- большая ширина
- фиксированная высота, максимальная высота слайда
- position: relative, что позволит создать перемещение слайдов
- CSS transition left, что позволит сделать движение плавным. Для простоты мы не указали все префиксы. Для этого также можно использовать CSS transformations (вместе с translation).

У слайдов есть атрибут float, чтобы они выстраивались по одной линии. Позиционируются они относительно, чтобы можно было получить их смещение слева в JS. Его мы используем для создания эффекта скольжения.

.slide {
float: left;
position: relative;
width: 1024px;
height: 683px;
}

Хоть мы и задали определённую ширину, в скрипте мы сможем поменять её, умножив количество слайдов на ширину слайда. Никогда не знаешь, какая ширина может потребоваться.

Навигация осуществляется через кнопки “Предыдущий” и “Следующий”. Обнуляем их стили по умолчанию и назначаем свои:



.slider-nav {
height: 40px;
width: 100%;
margin-top: 1.5em;
}


.slider-nav button {
border: none;
display: block;
width: 40px;
height: 40px;
cursor: pointer;
text-indent: -9999em;
background-color: transparent;
background-repeat: no-repeat;
}


.slider-nav button.slider-previous {
float: left;
background-image: url(previous.png);
}


.slider-nav button.slider-next {
float: right;
background-image: url(next.png);
}

При использовании ссылок на страницы вместо кнопок можно сделать следующие стили:

.slider-nav {
text-align: center;
margin-top: 1.5em;
}


.slider-nav a {
display: inline-block;
text-decoration: none;
border: 1px solid #ddd;
color: #444;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
}
.slider-nav a.current {
border-color: #000;
color: #000;
font-weight: bold;
}

Эти классы будут назначены из скрипта динамически.

Такой подход годится для эффекта скольжения. Если мы хотим достичь эффекта исчезновения и появления, надо поменять стили, поскольку float добавляет горизонтальные отступы между слайдами. То есть, слайды на одной линии нам не нужны – нам нужна "пачка" слайдов:



.slider {
width: 1024px;
margin: 2em auto;

}


.slider-wrapper {
width: 100%;
height: 683px;
position: relative; /* Создаёт контекст для абсолютного позиционирования */
}


.slide {
position: absolute; /* Абсолютное позиционирование всех слайдов */
width: 100%;
height: 100%;
opacity: 0; /* Все слайды скрыты */
transition: opacity 500ms linear;
}


/* Изначально виден только первый */


.slider-wrapper > .slide:first-child {
opacity: 1;
}



Для скрытия слайдов мы используем свойство opacity, поскольку программы для чтения данных с экрана пропускают содержимое элементов, у которых установлен display: none (см. CSS in Action: Invisible Content Just for Screen Reader Users).

Благодаря контекстному позиционированию CSS мы создали "пачку" слайдов, где последний слайд в исходнике оказывается впереди других. Но нам не это нужно. Для сохранения порядка слайдов нам надо спрятать все слайды, кроме первого.

JS задействует CSS transition, меняя значение свойства opacity у текущего слайда, и обнуляя это значение у всех остальных.

Проблемы с IE9

IE9 не поддерживает CSS transitions. Изменение значения свойства мгновенно поменяет его внешний вид. Для плавности нам придётся воспользоваться jQuery. Подробности по возможным решениям читайте в этой ветке на Stack Overflow.



Код на JavaScript



Слайд-шоу без разбивки на страницы

Слайд-шоу без разбивки на страницы работают по нажатию кнопок “Следующий” и “Предыдущий”. Их можно рассматривать как операторы инкремента и декремента. Всегда есть указатель (или курсор), который будет увеличен или уменьшен каждый раз по нажатию на кнопки. Начальное его значение 0, а цель – выбирать текущий слайд так же, как выбираются элементы массива.

Поэтому, когда мы первый раз нажимаем Следующий, указатель увеличивается на 1 и мы получаем второй слайд. Нажимая на Предыдущий, мы уменьшаем указатель и получаем первый слайд. И т.д.

Вместе с указателем мы используем метод jQuery .eq() для получения текущего слайда. На чистом JS это выглядит так:



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


Slideshow.prototype = {
init: function() {
this.slides = this.el.querySelectorAll( ".slide" );
//...
},
_slideTo: function( pointer ) {
var currentSlide = this.slides[pointer];
//...
}
};

Помните - NodeList использует индексы так же, как массив. Ещё один способ выбрать текущий слайд – селекторы CSS3:

Slideshow.prototype = {
init: function() {
//...
},
_slideTo: function( pointer ) {

var n = pointer + 1;
var currentSlide = this.el.querySelector( ".slide:nth-child(" + n + ")" );
//...
}
};

Селектор CSS3 :nth-child() считает элементы с 1, поэтому нужно добавить единичку к указателю. После выбора слайда его родительский контейнер надо сдвинуть справа налево. В jQuery можно использовать метод .animate():

(function( $ ) {
$.fn.slideshow = function( options ) {
options = $.extend({
wrapper: ".slider-wrapper",
slides: ".slide",
//...
speed: 500,
easing: "linear"
}, options);

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

$( options.wrapper, element ).
animate({
left: - $currentSlide.position().left
}, options.speed, options.easing );

};


//...
};


})( jQuery );

В обычном JS нет метода .animate(), поэтому мы используем переходы CSS:

.slider-wrapper {
position: relative; // обязательно
transition: left 500ms linear;
}

Теперь можно менять свойство left динамически через объект style: