Несколько скриптов слайд-шоу на одной страничке

[Admin]

К теме Автоматическая смена изображений (слайд-шоу) от пользователя Александр поступил довольно объемный комментарий, который было решено вынести в отдельную тему на форум.

Текст комментария целиком:

Цитата:Вроде всё так и сделал, но один блок всё же стоит. Не подскажете, где ошибка? Код:

<script type="text/javascript">

all_images = new Array (
"_mod_files/ce_images/vprodaje/53s.png",
"_mod_files/ce_images/vprodaje/25s.png",
"_mod_files/ce_images/vprodaje/62s.png",
"_mod_files/ce_images/vprodaje/31s.png");

var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 3000;
var lock = false;
var run;
var time_out = 10;


function chgImg(direction) {
if (document.images) {
document.slide_show2.src = all_images[Math.floor(Math.random()*all_images.length)];
}
}

function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}


all_images = new Array (
"_mod_files/ce_images/vprodaje/x243.png",
"_mod_files/ce_images/vprodaje/x244.png",
"_mod_files/ce_images/vprodaje/x245.png",
"_mod_files/ce_images/vprodaje/x246.png",
"_mod_files/ce_images/vprodaje/x247.png",
"_mod_files/ce_images/vprodaje/x248.png",
"_mod_files/ce_images/vprodaje/x249.png");

var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 3000;
var lock = false;
var run;
var time_out = 10;


function chgImg(direction) {
if (document.images) {
document.slide_show.src = all_images[Math.floor(Math.random()*all_images.length)];
}
}

function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>

<script type="text/javascript">
auto();
</script><div>


<table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td>&nbsp;</td><td width="856" height="" colspan="1" rowspan="1"><img src="_mod_files/ce_images/vprodaje/hot.png" alt="" title="" width="294" height="66" align="" style="width: 294px; height: 66px;"><a href="sale/about"><img src="_mod_files/ce_images/vprodaje/hot2.png" alt="" title="" width="132" height="66" align="" style="width: 132px; height: 66px;"></a><img src="_mod_files/ce_images/vprodaje/hot3.png" alt="" title="" width="18" height="66" align="" style="width: 18px; height: 66px;"><a href="contact/vprodaje9"><img src="_mod_files/ce_images/vprodaje/hot4.png" alt="" title="" width="136" height="66" align="" style="width: 136px; height: 66px;"></a><img src="_mod_files/ce_images/vprodaje/hot3.png" alt="" title="" width="18" height="66" align="" style="width: 18px; height: 66px;"><a href="sale/dostavka"><img src="_mod_files/ce_images/vprodaje/hot5.png" alt="" title="" width="65" height="66" align="" style="width: 65px; height: 66px;"></a><img src="_mod_files/ce_images/vprodaje/hot3.png" alt="" title="" width="18" height="66" align="" style="width: 18px; height: 66px;"><a href="jshow_picture('show_pic.php','_mod_files/ce_images/vprodaje/contactusopen.png','contactusopen.png',342,255);"><img src="_mod_files/ce_images/vprodaje/hot6.png" alt="" title="" width="110" height="66" align="" style="width: 110px; height: 66px; margin: 0px;"></a><img src="_mod_files/ce_images/vprodaje/hot7.png" alt="" title="" width="65" height="66" border="0" align="" style="width: 65px; height: 66px;"></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td width="856" height="" colspan="1" rowspan="1">&nbsp;<img src="_mod_files/ce_images/vprodaje/x243.png" name="slide_show"></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td width="856" height="" colspan="1" rowspan="1"><a href="contacts/-"><img alt="" title="" width="640" height="96" align="" style="width: 640px; height: 96px; margin: 0px;" src="_mod_files/ce_images/vprodaje/longpanel1i.png"></a><a href="contact/vprodaje7"><img src="_mod_files/ce_images/vprodaje/longpanel2.png" alt="" title="" width="197" height="96" align="" style="width: 197px; height: 96px;"></a><img src="_mod_files/ce_images/vprodaje/longpanel4.png" alt="" title="" width="19" height="96" align="" style="width: 19px; height: 96px;"></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td><br></td></tr></tbody></table></div>

<img src="_mod_files/ce_images/vprodaje/53s.png" name="slide_show2">

[Admin]

Александр, судя по коду, который Вы привели, часть функций скрипта Вами не используется (кнопки Предыдущая, Старт/Стоп и Следующая). Поэтому часть кода мы убрали, чтобы минимизировать скрипт и вот что получилось:

Код:

<script type="text/javascript">
all_images = new Array (
  "_mod_files/ce_images/vprodaje/53s.png",
  "_mod_files/ce_images/vprodaje/25s.png",
  "_mod_files/ce_images/vprodaje/62s.png",
  "_mod_files/ce_images/vprodaje/31s.png");

all_images2 = new Array (
  "_mod_files/ce_images/vprodaje/x243.png",
  "_mod_files/ce_images/vprodaje/x244.png",
  "_mod_files/ce_images/vprodaje/x245.png",
  "_mod_files/ce_images/vprodaje/x246.png",
  "_mod_files/ce_images/vprodaje/x247.png",
  "_mod_files/ce_images/vprodaje/x248.png",
  "_mod_files/ce_images/vprodaje/x249.png");

var run;

function chgImg() {
if (document.images) {
document.slide_show.src = all_images[Math.floor(Math.random()*all_images.length)];
document.slide_show2.src = all_images2[Math.floor(Math.random()*all_images2.length)];
}
}
</script>

<script type="text/javascript">
run = setInterval("chgImg()", 3000);
</script>

<img src="_mod_files/ce_images/vprodaje/x243.png" name="slide_show">
<img src="_mod_files/ce_images/vprodaje/53s.png" name="slide_show2">

В данном скрипте так же подразумевается, что оба изображения будут сменяться одновременно и с одинаковыми интервалами.

[glaford]

Как-то у меня все совсем горбато отражается под эти кодом:

vprodazhe.net/sale/gre

Александр

[Admin]

Прошу прощения.
В приведенном ранее скрипте допустил маленькую ошибку (забыл добавить в одну переменную двойку):

document.slide_show2.src = all_images2[Math.floor(Math.random()*all_images2.length)];

[glaford]

Да, всего один символ, а столько меняет... Теперь шикарно работает! Я перечитал статьи о скриптах для плавного перехода, но там как-то совсем все по-другому. А вот в условиях нынешнего скрипта, можно ли добавить такой простой тег, в котором нужно указывать только время задержки для плавности так сказать перехода? Безумно Вам благодарен

Александр

---

Почему-то скрипт теперь сбивает таблицу:

vprodazhe.net/sale/gre

[Admin]

Плавный переход лучше всего делать при помощи jQuery, т.к. будет работать во всех браузерах. Если нужно, то можно сделать.

Чтобы скрипт не сбивал таблицу:
1) Вынесите javascript код в конец странички (внутри таблицы ему не место).
2) Перед <img src="_mod_files/ce_images/vprodaje/53s.png" name="slide_show2"> удалите знак пробела ( &nbsp; ).
3) Ну и для однообразия, в следующей ячейке замените <td><br></td> на <td>&nbsp;</td>.

[glaford]

Ясненько, спс. Да, Таблица уже не смещается, но содержимое каким-то чудом меняется местами (обратите внимание на первую и на последующие картинки - поле подписки и кол-во шт. смещается вверх) Его бы вернуть на место. И как Вы во всем этом разбираетесь...

[Admin]

Просто переименуйте вначале скрипта массив all_images2 в all_images, а all_images в all_images2.

Просто немного практики

[glaford]

Просто гениально! Спасибо Вам огромное!

[Admin]

В ответ на комментарий # 1120 от Дмитрия.

Постарался сделать максимально простой скрипт и убрал все лишнее, при этом старался избегать использования для каждого слайд-шоу своей отдельной функции. Вроде работает как надо:

Код:

<script type="text/javascript">
all_images = new Array ("image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png");
all_images_2 = new Array ("image/img_11.png","image/img_12.png","image/img_13.png");
all_images_3 = new Array ("image/img_111.png","image/img_112.png");
var ImgNum = new Array (0,0,0);

function chgImg(whois,mass,num) {
  ImgNum[num]++;
  if (ImgNum[num] > mass.length - 1) { ImgNum[num] = 0; }
  document.getElementById(whois).src = mass[ImgNum[num]];
}
</script>

<div align="center">
<img src="image/img_1.png" id="slide_show">
<img src="image/img_11.png" id="slide_show_2">
<img src="image/img_111.png" id="slide_show_3">
</div>

<script type="text/javascript">
run = setInterval("chgImg('slide_show',all_images,0)", 1000);
run_2 = setInterval("chgImg('slide_show_2',all_images_2,1)", 2000);
run_3 = setInterval("chgImg('slide_show_3',all_images_3,2)", 3000);
</script>