Ротатор изображений на JavaScript с кнопками
Описание: Не так давно я выкладывал скрипт ротатор изображения на JavaScript. Однако, там была автоматическая смена изображения - показ слайдов. А вот сегодняшний скрипт позволяет пользователю изменять изображения с помощью кнопок. В общем, скрипт называется "Ротатор изображения на JavaScript с кнопками", смотрите на результат, и если понравится, то можете вставить к себе на сайт.
Результат:
Код JavaScript (вставлять между тегами <head> и </head>):
<script type="text/javascript">
var array = new Array(
"Foto1.jpg",
"Foto2.jpg",
"Foto3.jpeg"
);//массив с путями к картинкам
var i = 0;
function left() {
var image = document.getElementById("rotatorbutton");
i--;
if (i < 0) i = array.length - 1;
image.src = array[i];
}
function right() {
var image = document.getElementById("rotatorbutton");
i++;
if (i == array.length) i = 0;
image.src = array[i];
}
</script>
Код HTML (вставлять между тегами <body> и </body>):
<table>
<tr>
<td>
<input type = 'button' name = 'left' value = '<' onclick = 'left()' />
</td>
<td>
<script type = 'text/javascript'>
document.write("<img id = 'rotatorbutton' src = '" + array[0] + "' alt = 'Ротатор изображений с кнопками' width = '200' height = '200' />");
</script>
</td>
<td>
<input type = 'button' name = 'right' value = '>' onclick = 'right()' />
</td>
</tr>
</table> -
Создано 20.04.2011 22:03:15
-
Михаил Русаков
Комментарии (33):
почему у меня более 3 картинок не меняет? что сделать чтобы больше 3х перелистывал?
Ответить
Добавить ещё значений в массив array.
Ответить
document.write("<img id = 'rotatorbutton' src = '" + array[5] + "' alt = 'Ротатор изображений с кнопками' wid............... типо так чтоль????? где 5 стоит сейчас? или здесь???? var array = new Array( "01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg" );//массив с путями к картинкам
Ответить
Массив правильно изменили, а вот остальное трогать не надо было.
Ответить
понял. спасибо)
Ответить
Спасибо, в коде разобрался, хотя хотелось бы смену картинок без кнопки, нажатием на картинку, но это не главное. Главное, что картинки без подписи. Можно ли сделать, что бы была всплывающая подсказка, либо под/над снимком подпись, которая менялась бы вместе со снимком?
Ответить
Да, для этого достаточно использовать атрибут title для каждого тега img.
Ответить
Это ясно, но куда его в Вашем коде вставлять?
Ответить
Вы не знаете, что такое атрибут у тега?
Ответить
Вопрос не в этом. В Вашем коде есть тег img, но от не привязан к конкретной фотографии. Я не пойму, как при смене фотографии, менять атрибут. Может Вы имеете ввиду, что можно вместо "Foto1.jpg",... вставлять в массив тег с атрибутами?
Ответить
Всё правильно, нужно создать массив со всеми заголовками одновременно с путями к файлам и подставлять его вместе с путём.
Ответить
Спасибо!
Ответить
Подскажите как сделать чтоб при клике по изображению оно открылось на определённой странице?
Ответить
http://myrusakov.ru/javascript-image-newwindow.html
Ответить
Смысл моего вопроса состоит в том: нужно чтоб был "Ротатор изображений на JavaScript с кнопками" а при клике по изображению был переход на страницу. Там у вас открывается изображение в новом окне, а не страница. Т.е. надо объеденить эти два скрипта и клик сделать на страницу. Сам попробовал у меня не получилось. Не силён я в JavaScript. Помогите пожалуйста.
Ответить
<a href="page.html"><img src="image.jpg" alt="" /></a>
Ответить
???
Ответить
Это чтобы при клике по изображению был переход по ссылке. Можно и так сделать: <a href="image.jpg"><img src="image.jpg" alt="" /></a>
Ответить
Вы сами хоть пробовали так делать? Когда в var array = new Array( "Foto1.jpg", "Foto2.jpg", "Foto3.jpeg" заменяю <a href="page.html"><img src="Foto1.jpg" alt="" /></a> и т.д. вообще всё перестаёт работать.
Ответить
Так ведь надо думать, что делаете. Я показал основу, а исправление скрипта - Ваше дело. Если не знаете JavaScript, то забудьте об этом, изучайте его сначала, а потом пишите скрипты.
Ответить
Добрый вечер. Скрипт четко работает, но валидатор ругается: "Error document type does not allow element "img" here <script type = 'text/javascript'> document.write("<img id = 'rotatorbutton' src = '" + array[0] + "' alt = 'Ротатор изображений с кнопками'/>"); </script>
Ответить
http://myrusakov.ru/valid-javascript.html
Ответить
Как поменять цвет у кнопки?? Очень надо! Серый сливается с фоном.
Ответить
Через CSS свойство background-color.
Ответить
пробовал к тегу <td> не получилось.. к какому тегу нужно применить?
Ответить
К кнопке, а она, видимо, тег <input>
Ответить
ура покрасилась! спасибо!!
Ответить
А как сделать, чтобы перелистывалось по 5 картинок, например сначала выводлится с 1-5, потом с 6-10, и так далее.
Ответить
Надо полностью менять алгоритм. Не вижу проблем, если знаете JavaScript, если не знаете, то рекомендую это: http://srs.myrusakov.ru/javascript
Ответить
Подскажите, пожалуйста. как можно сделать несколько независимых друг от друга блока на странице, так, чтобы на каждом из них был ротатор изображений с кнопками (изображения на каждом блоке разные)?
Ответить
Владимир, сделайте два отдельных блока, они изначально не будут зависимы друг от друга.
Ответить
можно ли определение массива сделать с помощью - function ShowFolderFileList(folderspec) { var fso, f, fc, s; fso = new ActiveXObject('Scripting.FileSystemObject'); f = fso.GetFolder(folderspec); fc = new Enumerator(f.files); s = ''; for (; !fc.atEnd(); fc.moveNext()) { s += fc.item(); s += ' '; } return(s); }
Ответить
Добрый вечер. Подскажите как стелать ротатор как здесь http://rozetka.com.ua а именно <div class="big-promo float-lt" id="big-promo"> зарание благодарен
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.