Слайдшоу на JavaScript

Слайдшоу - попеременная смена картинок в определенном порядке автоматически или вручную. Тем, кто читал предыдущие статью "Эффект прозрачности в JavaScript" без проблем разберутся в нижеприведенном коде. Все достаточно просто: создаем массив с картинками и манипулируем ими как объектами:

<< Назад Вперед >>




















<script>

var slide = new Array;
var pictureName = new Array("flower[1].jpg", "flower[2].jpg", "flower[3].jpg", "flower[4].jpg");

for (var i = 0; i < pictureName.length; i++) {

slide[i] = new Image();
slide[i].src = pictureName[i];
}

var m = new Array(0, 100);
var nextImage = 0;
var t = "";


function next(step) {

if (t != "") return;

m[0] = 0;
m[1] = 100;

nextImage = nextImage + step;

if (nextImage == pictureName.length) {

nextImage = 0;
}

if (nextImage == -1) {

nextImage = pictureName.length - 1;
}


document.getElementById("after").src = slide[nextImage].src;

change_slide();

}

function change_slide() {

m[0] += 1;
m[1] -= 1;

document.getElementById("before_div").style.opacity = m[1]/100;
document.getElementById("after_div").style.opacity = m[0]/100;
document.getElementById("after_div").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("before_div").style.filter="alpha(opacity="+m[1]+")";

t = setTimeout("change_slide()",5);
if (m[0] > 98) {

clearTimeout(t);
document.getElementById("before").src = slide[nextImage].src;
document.getElementById("before_div").style.opacity = 100;
document.getElementById("before_div").style.filter="alpha(opacity=0)";
t = "";
}

}

</script>

<style>

.pic { position: absolute; top: 100px; left: 100px }
a.navigation { text-decoration: none }

</style>


<div id="after_div" class="pic">
<img id="after" src="flower[2].jpg">
</div>
<div id="before_div" class="pic">
<img id="before" src="flower[1].jpg">
</div>

<a href="javascript:next(-1)" class="navigation"><< Назад</a> <a href="javascript:next(1)" class="navigation">Вперед >></a>


В результате видим достаточно симпотичный переход между картинками. Пример качаем отсюда. Обсуждаем скрипт тут.

webobzor.net

SlatCh  08.04.2008  13:38 Отличный скрипт! спасибо!

lexa   08.04.2008  13:39 Ну у тебя такой же практически :)

none  21.04.2008  01:16 перед закриттям тегу скріпт, ляпніть function f1 (){ b=setTimeout("f1()",5000); next(1); } f1(); і буде автоматом через 5000 міняти картинку, так прикольніше, бо коли картинок багато, задовбуєшся натискати некст

none  23.04.2008  22:05 Народ тут є одне запитання... у цих картинок вирівнювання то абсолют, і як це подружити з обтіканням?

zion  12.05.2008  22:03 Подскажите,что надо подправить чтобы слайд отображался в определённом месте,скажем в заданной таблице!?

Desh  29.07.2008  17:46 Большое Благодарю за скрипт, сама бы долго голову ломала:)

Dreamer....  12.08.2008  09:00 Не подскажете, как заставить этот скрипт работать в автоматическом режиме? т.е. что бы при загрузке страницы начиналось слайдшоу...

lexa  12.08.2008  14:39 с бесконечным циклом или до только один раз прокрутить все картинки?

Dreamer....  12.08.2008  14:50 Все ок... разобрался...

ZemoN   02.10.2008  14:29 День добрый! Не подскажете, как заставить этот скрипт работать в автоматическом режиме с бесконечным циклом?

ZemoN   03.10.2008  20:09 Простите за назойлевость но ещё вопрос(ответ на первый уже нашел) :а можно ли в скрипте какнить вместо "" сделать отдельно ссылку на каждую картинку в слайд шоу? да и как это скажится на загрузку страницы т.е. они сразу начнут грузится или по мере клика на ссылку картинки? Спасибо за ответ =))

vvkot   03.10.2008  22:18 Прочитал про Ваш скрипт для автоматической замены страниц. Не могли бы подсказать как модифицировать скрипт, чтобы он автоматически плавно перерисовывал картинку, которую меняет php скрипт. Сейчас перегружаю картинку рефрешем, но получается грубо - мерцает, хотнлось бы плавно как в Вашем скрипте: ... здесь вызов php скрипта, который перерисовывает tmp.jpg ...

lexa  07.10.2008  02:10 ты имеешь в виду что например через php скрипт в онлайн времени рисуется картинка??? это не возможно, так как php это препроцессорный язык, грубо говорят сначала он формирует страницу на сервере, а только потом отдает клиенту. Если ты хочешь, что бы php сформировал картинку, а лишь потом заменил, это возможно сделать с использованием Ajax.

lexa  07.10.2008  02:11 Zemon, на счет автоматического режима смотри форум, там есть пример скрипта, а на счет второго вопроса, конечно можно, если скрипт нужен, отпишись на форуме, посмотри что там и как

vvkot   07.10.2008  03:28 Да не, Леш. Ты не понял. Есть URL картинки, например, test.jpg. На сервере лежит база из картинок из большого числа картинок. Есть PHP скрипт, при вызове которого, test.jpg заменяется другой картинкой. Нужно сделать цикл: вызов скрипта, затем загрузка картинки, потом опять. Сейчас я сделал просто рефрешем. Сделал страницу с картинкой с включенным в код скриптом, по рефрешу она обновляется, получается новая картинка, но все жутко мигает. Может сделать два фрейма: один без видимых элементов - постоянно рефрешется и меняет картинку, а во втором твой скрипт нюхает картинку и плавно ее меняет, если она изменилась??? Но как сделать.

lexa  08.10.2008  03:40 гм, я вообще предпочитаю не работать с фреймами, в общем мы похожий вопрос сейчас на форуме обсуждаем...

shock    09.10.2008  01:39 Недавно сделал что-то подобное, но автоматически прокручивает картинки, при этом картинки задаются не в массиве, а просто прокручиваются все картинки из определенного дива. Тут можно посмотреть код и результат : http://shockinfo.blogspot.com

CyberX   11.10.2008  09:58 Клёво, спасибо :)

lexa   15.10.2008  01:26 kot, смотри статью Постзагрузка картинок, тут намного проще и удобнее, ничего не надо заменять, картинки сами подгружаются

AKlion    15.10.2008  06:20 Спасибо за скрипт. На странице aklion.ru/index1.shtml разместил скрипт, слайдшоу цветы. Но в скрипте было прописанно абсалютное местоположение картинок слайдшоу. Как задать положение по центру таблици преднозначенной для размещения этого слайдшоу?

lexa  15.10.2008  11:14 вот так http://www.webobzor.net/forum/index.php?topic=87.0

654654  05.11.2008  08:13 [s][u][i][b]vbcvbcv[/b][/i][/u][/s] [b][i]IMHO[/i][/b], [b]P.S.[/b] [left][center][quote][code][font=Courier New] © [list] [*] [*] [*] [*] [/list][/font][/code][/quote][/center][/left]

* Ник:
E-mail:
Сайт:
* Комментарий:
* Введите число:	660