<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 3.0

PHP и MySQL с Нуля до Гуру 3.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 9 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

В Бонусе «Создание сайта для библиотеки» Вы увидите применение знаний из основного курса при создании полноценного проекта.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

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

Подпишитесь на мой канал на 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(); // Количество блоков

Ответить

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