<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

karina karina 04.01.2014 21:28:24

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

Ответить

ONYX ONYX 04.04.2014 11:19:31

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

Ответить

FIN FIN 03.05.2015 17:30:27

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

Ответить

vpsev vpsev 20.04.2020 01:30:03

нижеследующую строку из скрипта js необходимо перенести внутрь функции setCourse: var course_count = $("#slider div[id^='course']").size(); // Количество блоков

Ответить

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