<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Слайдер изображений на jQuery без плагинов

Слайдер изображений на jQuery без плагинов

Одной из самых популярных задач, которые делаются на jQuery, является создание плагина изображений. У меня на сайте службы поддержки есть как раз такой слайдер. Я создавал этот слайдер изображений с переключателями без плагинов. И его код в этой статье я сейчас приведу.

Для начала разберём HTML-код:

<div id="container">
  <div id="slider">
    <h3>Заголовок слайдера</h3>
    <div id="course_1" class="show">
      <a href="http://srs.myrusakov.ru/kurs">
        <img alt="Создание и Раскрутка сайта от А до Я" src="images/kurs-cover.png" />
      </a>
      <br />
      <a href="http://srs.myrusakov.ru/kurs">Создание и Раскрутка сайта от А до Я</a>
    </div>
    <div id="course_2">
      <a href="http://srs.myrusakov.ru/makeup">
        <img alt="Вёрстка сайта с нуля" src="images/makeup-cover.png" />
      </a>
      <br />
      <a href="http://srs.myrusakov.ru/makeup">Вёрстка сайта с нуля</a>
    </div>
    <div id="course_3">
      <a href="http://srs.myrusakov.ru/php">
        <img alt="PHP и MySQL с Нуля до Гуру" src="images/php-cover.png" />
      </a>
      <br />
      <a href="http://srs.myrusakov.ru/makeup">PHP и MySQL с Нуля до Гуру</a>
    </div>
  </div>
  <div id="switch">
    <img data-number="1" alt="Переключатель" src="images/slider_on.png" />
    <img data-number="2" alt="Переключатель" src="images/slider_off.png" />
    <img data-number="3" alt="Переключатель" src="images/slider_off.png" />
  </div>
</div>

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

Теперь добавим CSS:

#container {
  text-align: center;
  width: 300px;
}
#slider div {
  opacity: 0;
  position: absolute;
}
#slider div.show {
  opacity: 1;
  z-index: 100;
}
#switch {
  margin-top: 360px;
}
#switch img {
  cursor: pointer;
}
#slider img {
  width: 300px;
}

По сути, данный CSS-код размещает блоки друг под другом. Делая их полностью прозрачными. А единственный блок, который будет видимым, делается непрозрачным, а также размещён всегда поверх остальных. Всё остальное, думаю, понятно.

И, наконец, остался код JavaScript:

<script type="text/javascript">
  var course_delay = 500; // Задержка при смене блока
  var course_delay_auto = 5000; // Время показа блока в автоматическом режиме
  var course_active = 1; // Текущий активный блок
  var course_count = $("#slider div[id^='course']").size(); // Количество блоков
  var course_timer = setTimeout("setCourse(0)", course_delay_auto); // Включаем автоматическую смену блоков
  $("#switch img").bind("click", function(event) {
    setCourse($(event.target).attr("data-number")); // При клике по переключателю выводим соответствующий блок
  });
  function setCourse(number) {
    if (number == course_active) return; // Если выбранный блок и так активен, то выходим из функции
    var temp = course_active; // Сохраняем в temp старый активный блок
    /* Получаем номер следующего активного блока */     if (number == 0) {
      /* Если не был задан конкретный номер */       course_active++;
      if (course_active > course_count) course_active = 1;
    }
    else course_active = number;
    $("#switch img[data-number='" + temp + "']").attr("src", "images/slider_off.png"); // Выключаем "активный" переключатель
    $("#switch img[data-number='" + course_active + "']").attr("src", "images/slider_on.png"); // Включаем новый переключатель
    $("#course_" + course_active).css({opacity: 0.0}).addClass("show").animate({opacity: 1.0}, course_delay); // Выводим новый блок
    $("#course_" + temp).animate({opacity: 0.0}, course_delay, function () { // Прячем старый блок
      clearTimeout(course_timer); // Выключаем таймер
      course_timer = setTimeout("setCourse(0)", course_delay_auto); // Включаем таймер
    }).removeClass("show");
  }
</script>

Код я прокомментировал достаточно подробно, однако, возможно, не очень понятно, зачем выключать таймер, а после его сразу включать. Ответ простой - сбросить задержку. Допустим, таймер проработал 3 секунды и через 2 секунды он должен сменить блок. Пользователь в этот момент кликает по переключателю, пока там всё сменится, останется до срабатывания таймера примерно 1 секунда. То есть пользователь не успел кликнуть, а таймер ему уже включает следующий блок. Тогда как логично, чтобы при смене блока, таймер снова ждал 5 секунд до следующей автоматической смены.

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

Следовательно, использовать плагины стоит только для сложных задач, а для простых - лучше написать всё самому.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

karina karina 04.01.2014 21:28:24

Спасибо за урок! Не подскажете, а как добавить еще один переключатель, но уже в виде стрелочек по бокам? Спасибо.

Ответить

ONYX ONYX 04.04.2014 11:19:31

почему то у меня он не работает

Ответить

FIN FIN 03.05.2015 17:30:27

Добрый вечер Михаил! Спасибо большое за урок! У меня возникли проблемы, показывает только первую картинку, но остальные не показывает. В чем может быть проблема?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.