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

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

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

 

Разметка HTML

<div id="content">	
	<div id="example">
            	<p>Разные</p>
                <p>слова</p>
                <p>появляются</p>
                <p>каждую</p>
                <p>секунду!</p>
        </div>
</div>

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

 

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 секунда).

Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/pXkKiULJ2Ok/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Простое слайдшоу на jQuery | | 2012-06-19 11:59:38 | | Статьи Web-мастеру | | Таймер - отличный инструмент для создания различных трюков с помощью JavaScript. Типичный пример использования таймера - галерея изображений типа карусель. Обычно плагины для таких галерей имеют | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: