Независимо от того, какова основная цель вашего веб-сайта, если вы оснастили его полнофункциональным слайд-шоу Javascript, вы уменьшите разрыв между вашим бизнесом и целевыми клиентами. Слайд-шоу Javascript, являющиеся невероятным способом отображения большого количества информации в относительно небольшом пространстве, послужили отличными дополнениями для веб-страниц. Если эти детали привлекли вас к созданию собственного слайд-шоу (со скользящими панелями) с использованием Javascript, то вы попали на правильный урок. Здесь я поделюсь с вами некоторыми простыми шагами для создания слайд-шоу Javascript.
Понимание последовательности шагов в процессе создания слайд-шоу Javascript
В этом уроке я буду использовать простой HTML и CSS для создания слайд-шоу, в котором функциональность скольжения будет создаваться с использованием библиотеки jQuery Javascript. Я также буду использовать два популярных плагина, а именно: LocalScroll и ScrollTo для предоставления базовых эффектов в слайд-шоу javasrcipt. В то время как первый плагин позволяет якорям переходить от слайд-шоу к точному слайду в соответствии с целевым идентификатором, последний предлагает отличную функциональность скольжения, которая перемещает слайды вместо простого перехода с одного на другое.
Поскольку мы будем помнить о базовом параметре доступности при создании слайд-шоу, каждый пользователь сможет перемещаться и просматривать слайды, даже если опция Javascript отключена.
Вот посмотрите на структуру HTML для слайд-шоу:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sliding-enabled slideshow using jQuery | Script Tutorials</title>
<meta name="description" content="Sliding-enabled slideshow using jQuery demo - Script Tutorials">
<!-- include to stylesheet -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- include jQuery library and other javascripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.localscroll.js"></script>
<script src="js/custom-scripts.js"></script>
</head>
<body>
<div id="slideshow">
<!-- List of slider images -->
<ul>
<li id="slide1"><img src="images/slide1.jpg" alt="Slide 1" /></li>
<li id="slide2"><img src="images/slide2.jpg" alt="Slide 2" /></li>
<li id="slide3"><img src="images/slide3.jpg" alt="Slide 3" /></li>
<li id="slide4"><img src="images/slide4.jpg" alt="Slide 4" /></li>
<li id="slide5"><img src="images/slide5.jpg" alt="Slide 5" /></li>
</ul>
</div>
<div id="slideshow-nav">
<!-- Navigation list of slider images -->
<ul>
<li><a href="#slide1">Slide 1</a></li>
<li><a href="#slide2">Slide 2</a></li>
<li><a href="#slide3">Slide 3</a></li>
<li><a href="#slide4">Slide 4</a></li>
<li><a href="#slide5">Slide 5</a></li>
</ul>
</div>
</body>
</html>
Внимательно изучив приведенный выше код, вы обнаружите, что HTML-код для демонстрационных страниц начинается с Doctype, заголовка и ссылки на таблицу стилей CSS. После этого два плагина (уже объясненные выше), библиотека jQuery и пустой файл scripts.js могут быть связаны друг с другом, чтобы запустить слайд-шоу и работать.
HTML, который формирует слайд-шоу, был разделен на две части: div с идентификатором слайд-шоу и другой с идентификатором слайд-шоу. Здесь важно отметить, что div слайд-шоу будет включать в себя неупорядоченный список связанных изображений, тег <li> с идентификатором, который соответствует якорям слайд-шоу.
Теперь давайте посмотрим на стиль CSS:
CSS / style.css
#slideshow {/*slider container css*/
width: 800px;
height: 400px;
overflow: hidden;
margin: 50px auto 50px auto;
box-shadow: 0px 0px 50px #333;
-moz-box-shadow: 0px 0px 50px #333;
-webkit-box-shadow: 0px 0px 50px #333;
}
#slideshow ul {/*manage slider scroll elements css*/
width: 4000px;
list-style: none;
}
#slideshow ul li {
float: left;
}
Приведенный выше CSS будет стилизовать каждую страницу во что-то более похожее на слайд-шоу. Начиная с установки высоты и ширины слайд-шоу до размеров, точно таких же, как у слайдов изображения. С каждым слайдом, плавающим рядом, общая ширина неупорядоченного списка увеличивается до 4590 пикселей. Кроме того, я использовал свойство переполнения для предотвращения прохождения нескольких изображений по всей странице. Здесь все, что вам нужно сделать, это просто установить для свойства overflow значение overflow: scroll; сделать слайд-шоу работать даже в отсутствие Javascript.
Затем добавляется классная тень с использованием тени CSS3-box, как показано ниже:
#slideshow-nav {/* Slider navigation container css */
width: 150px;
margin: 0 auto 100px auto;
}
#slideshow-nav ul {
list-style: none;
}
#slideshow-nav ul li {
float: left;
}
#slideshow-nav ul li a {/* navigation styling css */
display: block;
width: 20px;
height: 20px;
float: left;
margin: 0 5px;
background: #fff;
text-indent: -9999px;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 0px 30px #000;
-webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
/* hover and active navigation css */
background: #333;
}
Здесь, если вы внимательно наблюдаете, div слайд-шоу перемещается в положение, которое находится под основным разделом слайд-шоу. Кроме того, мы не хотим, чтобы несколько кнопок не работали в ситуации, когда Javascript был включен. Вы можете использовать видимость: скрытый; для скрытия этих кнопок по умолчанию, чтобы сделать их видимыми в более поздний момент времени. Возможно, вам также будет интересно узнать, что привязки каждого списка навигации преобразуются в круглые кнопки с помощью CSS3 border-radius, при этом текст по умолчанию смещается за пределы экрана с использованием отрицательного отступа для текста.
Пока слайд-шоу видно в рабочем состоянии даже без Javascript. Есть только полоса прокрутки, которая позволяет пользователю перемещаться между несколькими изображениями.
Наконец, давайте посмотрим на функциональность jQuery
JS / заказ-scripts.js
$(document).ready(function() {
var slider = $("#slideshow");
var slider_nav = $("#slideshow-nav");
slider_nav.find("a[href=#slide1]").addClass("active");
slider_nav.localScroll({
target:'#slideshow',
axis: 'x'
});
slider_nav.find("a").click(function(){
slider_nav.find("a").removeClass("active");
$(this).addClass("active");
});
});
Если вы посмотрите на приведенный выше код, то увидите, что CSS div для слайд-шоу был изменен с overflow: scroll; переполнить; скрытый; для того, чтобы удалить полосу прокрутки. После этого видимость навигационных кнопок была сделана видимой с активным классом, автоматически добавляемым к самой первой кнопке. Оба плагина viz: LocalScroll и ScrollTo теперь активируются, при этом функциональность localScroll применяется к элементам слайд-шоу, направляя их к целевым элементам слайд-шоу, просто перемещаясь вдоль оси X.
Наконец, чтобы убедиться, что все кнопки в слайд-шоу загораются с соответствующим активным классом (при каждом нажатии), мы будем использовать простое правило jQuery, которое удалит активный класс из разных кнопок. Этот конкретный активный класс появится в таблице стилей CSS для рендеринга серого цвета фона для соответствующей кнопки. Выполнение быстрого теста в браузере покажет весь слайд-шоу javascript, работающий в лучшем виде.
Это оно!
Выход:
Live Demo
Вывод
Так что это было все о создании привлекательного слайд-шоу Javascript, которое может добавить блестящую визуальную привлекательность и элегантность в ваши скучные, скучные веб-страницы.