Ротатор изображений на JavaScript
Описание: Сегодня я представляю Вашему вниманию очень простой, но часто используемый скрипт - "Ротатор изображений на JavaScript". Несмотря на всю его простоту, он применяется при показе слайдов, а это уже встречается очень часто. Вдобавок, с помощью ротатора изображений можно менять баннеры (либо какие-нибудь фотографии из галереи изображений), что также активно применяется.
Результат:
Код JavaScript (вставлять между тегами <head> и </head>):
<script type="text/javascript">
var array = new Array(
"images/javascript/Foto1.jpg",
"images/javascript/Foto2.jpg",
"images/javascript/Foto3.jpeg"
);//массив с путями к картинкам
var delay = 2000; //задержка в миллисекундах
function imageRotator(i) {
var image = document.getElementById("rotator");
image.src = array[i];
i++;
if (i == array.length) i = 0;
setTimeout("imageRotator(" + i + ")", delay);
}
</script>
Код HTML (вставлять между тегами <body onload="imageRotator(0)"> и </body>):
<p>
<img id = 'rotator' src = '' alt = 'Ротатор изображений' width = '150' height = '150' />
</p> -
Создано 18.04.2011 19:15:45
-
Михаил Русаков
Комментарии (8):
Вот он, скрипт, который был мне нужен. А то пытался сделать тем методом: http://myrusakov.ru/document-javascript.html#comment_6370. Забыл просто, что автоматическая смена картинок - это слайдшоу называется.
Ответить
Подскажите пожалуйста как сделать так чтобы при клике по изображению осуществлялся переход на заданную страницу?
Ответить
<a href="page.html"><img src="img.jpg" alt="" /></a>
Ответить
Измените код и поставьте в src хотя бы "#", а то код невалидный получится
Ответить
Здравствуйте, Михаил. Вставил на страницу код ротатора изображений, однако возникла проблема: как сделать, чтобы каждая картинка была ссылкой на определённую страницу. Адреса картинок прописаны в скрипте. Как туда вставить ссылки? Подскажите, пожалуйста.
Ответить
добавляйте действие onclick к каждой картинке.Там ссылку переход на страницу. Должно прокатить
Ответить
А как это прописать здесь: var array = new Array( "images/javascript/Foto1.jpg", ?
Ответить
Здесь никак, Вам выше написали решение. Создаете событие onclick к каждой картинке.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.