Автоматическая смена изображений (слайд-шоу)
Для тех, кто хочет показать посетителям своего сайта много различных изображений, но не хочет при этом занимать изображениями весь экран, предлагаем воспользоваться скриптом автоматической смены изображений.
Пример работы скрипта автоматической смены изображений, или как его еще называют ротатора изображений, Вы можете наблюдать чуть ниже.
Предыдущая | Старт/Стоп | Следующая |
Для того чтобы получить на своем сайте такое слайд-шоу, вставьте в начало Вашей странички следующий JavaScript код:
<script type="text/javascript">
all_images = new Array (
"image/img_1.png",
"image/img_2.png",
"image/img_3.png",
"image/img_4.png");
var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 2500;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) { ImgNum = ImgLength; }
document.slide_show.src = all_images[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>
Далее в том месте Вашей странички, где Вы планируете разместить изображения, которые будут автоматически меняться, добавите следующий код:
<table style="margin: 0 auto;">
<tr style="text-align: center;">
<td colspan="3"><img src="image/img_1.png" name="slide_show"></td>
</tr>
<tr>
<td style="text-align: right;"><a href="javascript:chgImg(-1)">Предыдущая</a></td>
<td style="text-align: center;"><a href="javascript:auto()">Старт/Стоп</a></td>
<td style="text-align: left;"><a href="javascript:chgImg(1)">Следующая</a></td>
</tr>
</table>
После этого остается только запустить ранее описанную функцию смены изображений. Делается это следующим образом:
<script type="text/javascript">
auto();
</script>
В результате добавления описанного JavaScript кода на свой сайт Вы получите слайд-шоу из указанных Вами картинок (как в приведенном выше примере).
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Сам я этого реализовать не могу. Языков не знаю…
Чтобы не выкладывать весь скрипт в комментарии, создал отдельную тему - Автоматическая смена изображений и подписей к ним.
P.S. Код я удалил, т.к. он повторяет тот, что в теме и занимает в комментариях много места.
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) { ImgNum = ImgLength; }
document.slide_show.src = all_images[ImgNum];
на одну такую:
document.slide_show.src = all_images[Math.floor(Math.random()*all_images.length)];
При этом следует учитывать, что кнопки "Предыдущая" и "Следующая" будут работать не корректно.
Дальнейшее обсуждение перенес на форум в тему Несколько скриптов слайд-шоу на одной страничке.
$img=array("img_1.png","img_2.png","img_3.png","img_4.png","img_5.png","img_6.png","img_7.png");
echo '<img src="'.$img[date(w)].' alt="">';
Где date(w) - номер дня недели (0 - воскресенье, 6 - суббота), который мы используем для получения элемента массива с URL изображений. Таким образом, каждый день недели - свое изображение.
Оформить текст ссылки думаю Вы сами сможете при помощи CSS.
<span onclick="chgImg(-1)">Предыдущая</span>
Также можно сделать в виде изображения <img src="..." onclick="chgImg(-1)">
Заранее спасибо!
Именно это изображение будет появляться при обновлении странички, пока скрипт не начал смену изображений.
Возможно, он подойдет Вам.
Спасибо большое за ответ.
<script type="text/javascript">
var all_images = new Array("images/pic1.jpg","images/pic2.jpg","images/pic3.jpg","images/piche4.jpg");
auto();
</script>
Пробовал auto() в отдельный аналогичный скрипт. Результата тоже нет.
Ну, т.е. в каждом html файле вставил массив с разным наполнением.
Причем если файл всего один, то все работает.
Даже не знаю, как диагностировать код. Либо удается один запустить, либо другой, а оба вместе не получается.
Т.е. навигация на самой сменяющейся картинке.
function chgImg(direction) {
if (document.images)
{...
Которым срочно потребовалась такая штука, но времени и квалификации не хватает.
А тут и вопрос неплохой. У меня есть большая личная фотобиблиотека. И я хочу на главной странице сайта ежедневно ставить супер-фото, но требуется, чтобы их смена происходила не через полторы минуты, а один раз в сутки или, два раза в сутки. А еще лучше: в - 06:00, 12:00, 18:00, 24:00 - возможно ли прописать такой алгоритм?
Заранее спасибо!
Кликнули "Старт/(Авто)".
Просьба подсказать - как доработать скрипт, чтобы слайд один раз пролистал все картинки и остановился на последней.
С готовностью вновь стартовать по этой схеме от кнопки "Старт/Авто".
С сохранением функционала - возможность пролистать картинки вручную кнопками "Предыдущая"/"Последующая" при активации кнопки слайда "Стоп/Ручной".