Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Cлайд шоу с помощью javascript

Cлайд шоу с помощью javascript

Слайд шоу реализовано на языке javascript по следующему алгоритму.

Разместить на странице динамическую картинку, после её полной загрузки вызвать функцию (функция1), которая через 5сек. вызовет функцию2 которая и сменит картинку и так до бесконечности.

План

1. Вызов функций через заданный промежуток времени
2. Узнать статус картинки
3. setTimeOut


Код css

.photo{border:4px solid #ccc;}

Код javascript

function smoothChange(id)
{
  setTimeout(function(){changePhoto(id)},5000);
}

function changePhoto(id)
{
  var el=document.getElementById(id);
  var num=el.name.substring(3);
  if(num>5){num=0;}
  var dir="pics/";

  el.src=dir+'pic'+(num*1+1)+'.jpg';
  el.name='pic'+(num*1+1);
}

Код html

<img class="photo" src="pics/pic1.jpg" name="pic1" onload="smoothChange('photoframe')" id="photoframe">
Опубликовал dimas_ua, 12-09-2010, 00:00 Комментариев: 1
 (голосов: 0)
Пишет css10, 21 сентября 2010 19:58
  • Сообщений: 0
  • Новостей: 0
Здравствуйте, спасибо за полезные уроки. Не могли бы вы подсказать, как можно реализовать это слайд шоу, только что бы каждая показанная картинка вела на соответствующую запись на блоге. То есть, предположим, создаем папку, закидываем туда 5 картинок вроде привью к пяти постам на сайте. Потом картинки будут показываться в слайдшоу, но на них можно кликнуть и перейти на нужный пост. Спасибо за помощь