C выходом в продажу очередного классного гаджета в Apple - iPad выяснилось, что он не поддерживает Flash анимацию. Это породило массу споров насчет будущего этой технологии. Учитывая это, автор данного урока считает, что разумно создавать небольшие виджеты, такие как слайдеры изображений, используя только CSS\HTML\Javascript.

Подобные слайдеры более дружелюбны с точки зрения поисковой оптимизации и работают даже при отключенном JS.

Исходники по просьбе автора урока не предоставляются! Но собрать их самому легче простого из демо версии.

HTML

Начнем с оберточного контейнера main_view и 2-мя встроенными секциями image_reel и paging. Первая будет содержать меняющиеся изображения, вторая - управление переключением. Взгляните на изображение ниже для наглядности:

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="reel_1.jpg" alt="" /></a>
<a href="#"><img src="reel_2.jpg" alt="" /></a>
<a href="#"><img src="reel_3.jpg" alt="" /></a>
<a href="#"><img src="reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>

CSS

В коде присутствуют комментарии:

/*--Главный контейнер--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Стили--*/
.window {
	height:286px;	width: 790px;
	overflow: hidden; /*--Прячет все за пределами width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Стили--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--кнопки смены слайдов поверх изображения--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; /*--Спрятано по умолчанию, потом будет показано с помощью jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

jQuery - начало

Прежде всего подключаем:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Сразу под этой строкой откройте новый тег <script> и введите событие $(document).ready. Это позволит выполнять скрипт только при полной загрузке страницы.

$(document).ready(function() {
//Сюда пишем код
});

jQuery - продолжение

Настраиваем слайдер изображений

Начните с показа управления страницами и активации первого изображения (ссылки). Далее мы посчитаем и подстроим ширину image_reel в зависимости от количества слайдов:

//Показать управление страницами и активировать первую ссылку
$(".paging").show();
$(".paging a:first").addClass("active");
//Взять размер изображения, кол-во изображений, и далее определить размер "холста".
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Подстроить размер "холста" под новый размер
$(".image_reel").css({'width' : imageReelWidth});

Настройка функции слайдера и таймера

Вначале мы создаем функцию для события прокрутки (rotate). Далее создаем еще функцию (rotateswitch), которая будет повторять событие прокрутки.

//Функции
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Взять количество раз для прокрутки
    var image_reelPosition = triggerID * imageWidth; //Определить дистанцию для прокрутки

    $(".paging a").removeClass('active'); //Убрать все классы active
    $active.addClass('active'); //Добавить класс active

    //Анимация слайдера
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 
//Вращение и заддержка
rotateSwitch = function(){
    play = setInterval(function(){ //Задать таймер
        $active = $('.paging a.active').next(); 
        if ( $active.length === 0) {
            $active = $('.paging a:first'); //после последней - обратно на первую
        }
        rotate(); 
    }, 7000); //Время для прокрутки (7 секунд)
};

rotateSwitch(); 

Наведение мышкой + события при нажатии

Если пользователь хочет просмотреть слайд более продолжительное время, мы сделаем так, чтобы слайдер остановился при наведенной мышке. Также мы должны сбрасывать таймер при каждом клике на номер с слайдом.

//При наведении
$(".image_reel a").hover(function() {
    clearInterval(play); //прекратить смену слайдов
}, function() {
    rotateSwitch(); //продолжить
});	
//При нажатии
$(".paging a").click(function() {
    $active = $(this); 
//Сброс таймера
    clearInterval(play); //Прекратить смену слайдов
    rotateSwitch(); // Продожить
    rotate(); //Вызвать немедленно смену
    return false;
});

Вот и все готово!

И в конце немного примеров с других сайтов для вдохновения: