Сегодня мы попытаемся написать небольшую галерею картинок, картинки в которой будут автоматически меняться. Я поставил перед собой задачу, написать слайдшоу, чтобы затем сделать модуль для CMS с панелью управления. С возможностью вставлять на страницу несколько таких блоков. И так приступим.
Создаем index.html и подключаем jQuery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Слайдшоу</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script src="jquery-1.3.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> // тут будет функция смены картинок </script> </head> <body> <!-- Выводим первый кадр слайдшоу --> <div id='animate'><img border='0' src="1.jpg" /></div> </body> </html>
Для того, чтобы реализовать слайдшоу, нам необходимо сделать задержку после появления картинки, затем заменить её на другую. Используем функцию fadeTo, которая либо скрывает объект, либо отображает. У функции есть три параметра:
1 – параметр: скорость отображения, в миллисекундах иди slow, normal, fast.
2 – параметр: степень прозрачности, т.е. до какого значения будет изменяться прозрачность.
3 – параметр: вызов функции.
Алгоритм такой, как только загружается страница, мы вставляем функцию fadeTo с прозрачностью 1, для того чтобы создать задержку. Затем запускаем функцию скрывания. Пока картинка скрыта, мы подменяем картинку на новую. После чего показываем картинку и запускаем в рекрусию данный алгоритм. Все повторяется заново, но с новыми значениями картинки и счетчика.
Приступаем к реализации.
<script type="text/javascript">
var animate = new Array('<img src="1.jpg" />','<img src="2.jpg" />','<img src="3.jpg" />','<img src="4.jpg" />'); // Вставляем картинки в массив
//функция reimg(идентификатор, кол-во картинок, счетчик, время ожидания, время затухания, время появления)
function reimg (id, colimg, count, timeload, timehide, timeshow)
{
$("#"+id).fadeTo(timeload,1, function(){ //Время ожидания
$("#"+id).fadeTo(timehide,0, function(){ //Время затухания
count++;
if (count == colimg){
count=0;
}
$("#"+id).html(animate[count]);
$("#"+id).fadeTo(timeshow,1, function(){ //Время появления
reimg(id, colimg, count, timeload, timehide, timeshow);
});
});
});
}
$(window).load(function(){
reimg('animate',4,0,1000,100,100);
});
</script>
Таких слайдшоу можно сколько угодно вставить на одну страницу. Добавятся лишь следующие параметры.
Массив с изображениями:
var animate2 = new Array('<img src="1.jpg" />','<img src="2.jpg" />');
Вызов функции после загрузки страницы:
reimg('animate2',2,0,1000,500,500);
Вывод изображения на страницу:
<div id='animate2'><img border='0' src="1.jpg" /></div>
Вот и все, как всегда ничего сложного. После тестирования, мы замечаем, что иногда новая картинка не успевает подгрузиться перед своим появлением. Решение у этой проблемы следующее. Мы вставляем в блок все используемые изображения, прописываем в стилях visibility: hidden; и «запихиваем» куда ни будь подальше, чтобы не мешался.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Слайдшоу</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script src="jquery-1.3.2.min.js" type="text/javascript" ></script>
<script>
var animate = new Array('<img src="1.jpg" />','<img src="2.jpg" />','<img src="3.jpg" />','<img src="4.jpg" />');
var animate2 = new Array('<img src="1.jpg" />','<img src="2.jpg" />');
function reimg (id, colimg, count, timeload, timehide, timeshow)
{
$("#"+id).fadeTo(timeload,1, function(){ //Время ожидания
$("#"+id).fadeTo(timehide,0, function(){ //Время затухания
count++;
if (count == colimg){
count=0;
}
$("#"+id).html(animate[count]);
$("#"+id).fadeTo(timeshow,1, function(){ //Время появления
reimg(id, colimg, count, timeload, timehide, timeshow);
});
});
});
}
$(window).load(function(){
reimg('animate',4,0,1000,100,100);
reimg('animate2',2,0,1000,500,500);
});
</script>
</head >
<body >
<div style='width:1px; height:1px; overflow:hidden; left:-100px; visibility: hidden;' id='loadimg'> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /></div>
<div id='animate'><img border='0' src="1.jpg" /></div>
<div id='animate2'><img border='0' src="1.jpg" /></div>
</body>
</html>