Простое слайдшоу на jQuery

Таймер - отличный инструмент для создания различных трюков с помощью JavaScript. Типичный пример использования таймера - галерея изображений типа "карусель". Обычно плагины для таких галерей имеют несколько опций и обязательно в набор входит установка смены изображения через заданный интервал времени (обычно, несколько секунд). В данном уроке демонстрируется принцип организации карусели.

Таймер не будет делать ничего головокружительного. Просто меняем тег <p> раз в секунду. Развитие идеи остается на ваше усмотрение. Код урока вполне можно использовать в проекте в качестве легкой альтернативы тяжеловесным мощным плагинам там, где требуется минимум опций при сохранении общей динамики объекта страницы. Код HTML и CSS будет простым, насколько возможно.

HTML

 

Разные

слова

появляются

каждую

секунду!

Разметка для нашего слайдера проста до наивности.

CSS

#example {
 background: white;
 border: 2px solid #333;
 display: block;
 margin: 0 auto;
 padding: 10px;
 width: 100px;
}
#example p {
 color: #333;
 display: none;
 font-weight: bold;
 text-align: center;
}
#example p:first-child {
 display: block;
}

Код CSS формирует внешний вид нашего примера. Селектор #example p имеет свойство ‘display: none’, так что элементы <p> скрыты до тех пор, пока код JavaScript не будет их выводить. Также добавляем псевдо-класс :first-child для обеспечения обратной совместимости в случае, если браузер не поддерживает JavaScript (будет выводиться первым элемент <p>).

JavaScript

$(document).ready(function(){ 

 $("#example p:first").css("display", "block");

 jQuery.fn.timer = function() {
  if(!$(this).children("p:last-child").is(":visible")){
   $(this).children("p:visible")
    .css("display", "none")
    .next("p").css("display", "block");
  }
  else{
   $(this).children("p:visible")
    .css("display", "none")
   .end().children("p:first")
    .css("display", "block");
  }
 } // Конец функции таймера

 window.setInterval(function() {
  $("#example").timer();
 }, 1000);

});

1Включаем первый элемент <p>.

2определяем функцию таймера.

3Если последний элемент <p> не видим, то

4Указываем на видимый элемент <p>, скрываем его и устанавливаем для следующего элемента <p> свойство ‘display: block’

5Или

6Указываем на видимый элемент <p>.

7Скрываем его.

8Указываем на первый элемент <p> и устанавливаем для него свойство ‘display: block’

9Устанавливаем интервал повторения для таймера $(“#example”).timer(); равным 1000 миллисекундам 1 секунда.

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!