Статьи

Полное руководство по созданию слайд-шоу с поддержкой слайдов с использованием jQuery

Независимо от того, какова основная цель вашего веб-сайта, если вы оснастили его полнофункциональным слайд-шоу Javascript, вы уменьшите разрыв между вашим бизнесом и целевыми клиентами. Слайд-шоу Javascript, являющиеся невероятным способом отображения большого количества информации в относительно небольшом пространстве, послужили отличными дополнениями для веб-страниц. Если эти детали привлекли вас к созданию собственного слайд-шоу (со скользящими панелями) с использованием Javascript, то вы попали на правильный урок. Здесь я поделюсь с вами некоторыми простыми шагами для создания слайд-шоу Javascript.

Слайд-шоу с поддержкой слайдов с использованием jQuery

Понимание последовательности шагов в процессе создания слайд-шоу 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, которое может добавить блестящую визуальную привлекательность и элегантность в ваши скучные, скучные веб-страницы.