9.3 KiB
title | localeTitle |
---|---|
Guide to Build a Sliding Image Gallery | Руководство по созданию скользящей галереи изображений |
Этот учебник поможет вам создать слайдер изображения с помощью библиотеки jQuery .
Это руководство будет состоять из четырех частей:
HTML
Мы будем использовать Bootstrap для этого учебника, чтобы все выглядело хорошо, не тратя много времени.
Наша структура будет следующей:
<div class="container">
<!-- The wrapper for our slider -->
<div class="slider">
<ul class="slides"><!-- Each image will be inside this unordered list --></ul>
</div>
<div class="buttons"><!-- Pause and play buttons will go in here --></div>
</div>
Внутри нашей ul
с классом slides
мы будем иметь следующее:
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
В нашем классе .buttons
вы должны иметь следующее:
<button type="button" class="btn btn-default pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default play">
<span class="glyphicon glyphicon-play"></span>
</button>
Вот пример того, как должен выглядеть ваш html
:
Примечание. Вы должны заменить атрибут
src
изображения на свой собственный контент.
<div class="container">
<div class="slider">
<ul class="slides">
<li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li>
</ul>
</div>
<div class="buttons">
<button type="button" class="btn btn-default pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default play">
<span class="glyphicon glyphicon-play"></span>
</button>
</div>
</div>
SCSS
Мы используем Sass и синтаксис SCSS, чтобы мы могли вложить и использовать переменные
Мы можем использовать следующий SCSS для определения нашего стиля:
// Variables
$width: 720px;
.slider {
width: $width;
height: 400px;
overflow: hidden;
margin: 0 auto;
text-align: center;
.slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
.slide {
float: left;
list-style-type: none;
width: $width;
height: 400px;
img {
width: 100%;
height: 100%;
}
}
}
.buttons {
margin: 0;
width: $width;
position: relative;
top: -40px;
margin: 0 auto;
.play {
display: none;
}
.btn {
display: flex;
margin: 0 auto;
text-align: center;
}
}
JS
переменные
В следующем фрагменте кода мы определяем переменные, используемые позже в нашем коде.
var animationSpeed = 1000; // How quickly the next slide animates.
var pause = 3000; // The pause between each slide.
Мы будем использовать пустую переменную, где мы будем называть метод setInterval
:
var interval;
Анимация Мы обернем анимацию слайдера внутри функции:
function startSlider() {}
Мы используем встроенный JavaScript-метод setInterval()
для автоматизации содержимого функции в триггере, основанном на времени.
interval = setInterval(function() {}, pause);
Мы используем переменную pause
чтобы увидеть, сколько миллисекунд ждать до вызова функции снова. Подробнее о методе setInterval
здесь: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Внутри нашей функции мы будем использовать jQuery для перехода между слайдами со скоростью переменной animationSpeed:
$('.slides > li:first')
.fadeOut(animationSpeed)
.next()
.fadeIn(animationSpeed)
.end()
.appendTo('.slides');
-
Мы нацеливаем первый слайд, используя
$('.slides > li:first')
. -.fadeOut(animationSpeed)
выцветает с первого слайда, а затем используя.next()
, мы переходим к следующему слайду. - Как только мы переместимся на следующий слайд, мы.fadeIn(animationSpeed)
его в:.fadeIn(animationSpeed)
. - Эта последовательность будет продолжаться до последнего слайда (.end()
), затем мы остановим анимацию. Теперь мы вызываем функциюstartSlider
для запуска анимации:startSlider ();
Воспроизведение и пауза Эта функция является необязательной, но довольно проста в реализации. Мы скроем кнопку воспроизведения, поэтому мы не видим кнопки воспроизведения и паузы:
$('.play').hide(); // Hiding the play button.
Теперь мы создадим нашу кнопку паузы (автоматически отображаемую при загрузке страницы):
$('.pause').click(function() {
clearInterval(interval);
$(this).hide();
$('.play').show();
});
-
Мы будем называть нашу функцию каждый раз, когда нажата кнопка паузы, используя jQuery. - Мы удалим интервал, используя метод
clearInterval
и используем нашу переменнуюinterval
в качестве параметра, указывая, какой интервал останавливаться. - Поскольку наш слайдер приостановлен, мы$(this).hide();
кнопку паузы, используя$(this).hide();
, Примечание: мы используемthis
, что будет ссылаться на то, что вызывает наш родитель, т..pause
. - Затем мы покажем нашу кнопку воспроизведения, чтобы пользователь мог возобновить анимацию:$('.play').show();
, Следующий код устанавливает нашу кнопку воспроизведения (автоматически скрывается при загрузке страницы):('. play'). click (function () { startSlider ();
(Это) .hide (); $ ( 'Пауза') шоу (). }); -
Мы будем называть нашу функцию каждый раз, когда нажата кнопка воспроизведения с помощью jQuery.
- Мы начнем или перезапустим интервал, используя функцию
startSlider
. - Поскольку наш слайдер в данный момент играет, мы
$(this).hide();
кнопку воспроизведения, используя$(this).hide();
, Примечание: мы используемthis
, которое будет ссылаться на то, что вызывает наш родитель, т.е..play
. - Затем мы покажем нашу кнопку паузы, чтобы пользователь мог остановить анимацию по желанию:
$('.pause').show();
,
- Мы начнем или перезапустим интервал, используя функцию
Рекомендации
- Ознакомьтесь с исходным кодом и примером для CodePen для этого руководства.