Множественное слайдшоу на одной странице
 

Здравсвуйте друзья, имеется код для слайдшоу из указаной папки, у меня стоит задача сделать три таких слайдшоу из разных папок, "утроил код", слайды меняются, но хаотично, хотя при одном слайдшоу - слайды меняются по порядку, подскажите пожалуйста, куда копать.

<script type="text/javascript">
<?php
$images = array();
$folder = 'Rasporyagheniya_1/';
$array_to_js='var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 800;
play  =setInterval("chgImg()", 5000);

function chgImg() {
$('#slide_show').fadeOut(time, function() {
  $(this).attr('src', imgs[n]).fadeIn(time);
});

n++;
if (n>=imgs.length) n = 0;
}

<?php
$images = array();
$folder = 'Pisma_2/';
$array_to_js = 'var imgs_2=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 800;
play = setInterval("chgImg_2()", 5000);

function chgImg_2() {
$('#slide_show_2').fadeOut(time, function() {
  $(this).attr('src', imgs_2[n]).fadeIn(time);
});

n++;
if (n>=imgs_2.length) n = 0;
}

<?php
$images = array();
$folder = 'OTiPB_3/';
$array_to_js = 'var imgs_3=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 800;
play = setInterval("chgImg_3()", 5000);

function chgImg_3() {
$('#slide_show_3').fadeOut(time, function() {
  $(this).attr('src', imgs_3[n]).fadeIn(time);
});

n++;
if (n>=imgs_3.length) n = 0;
}
</script>

Результат вот такой, то есть картинки находит по порядку, но выдает странно, может одну и ту же показывать несколько раз подряд

<script type="text/javascript">
var imgs=["Rasporyagheniya_1/1.jpg","Rasporyagheniya_1/2.jpg","Rasporyagheniya_1/3.jpg","Rasporyagheniya_1/4.jpg","Rasporyagheniya_1/5.jpg","Rasporyagheniya_1/6.jpg"];
var n = 0;
var time = 800;
play  =setInterval("chgImg()", 5000);

function chgImg() {
$('#slide_show').fadeOut(time, function() {
  $(this).attr('src', imgs[n]).fadeIn(time);
});

n++;
if (n>=imgs.length) n = 0;
}

var imgs_2=["Pisma_2/1.jpg","Pisma_2/2.jpg","Pisma_2/3.jpg","Pisma_2/4.jpg"];
var n = 0;
var time = 800;
play = setInterval("chgImg_2()", 5000);

function chgImg_2() {
$('#slide_show_2').fadeOut(time, function() {
  $(this).attr('src', imgs_2[n]).fadeIn(time);
});

n++;
if (n>=imgs_2.length) n = 0;
}

var imgs_3=["OTiPB_3/1.jpg","OTiPB_3/2.jpg","OTiPB_3/3.jpg","OTiPB_3/4.jpg","OTiPB_3/5.jpg"];
var n = 0;
var time = 800;
play = setInterval("chgImg_3()", 5000);

function chgImg_3() {
$('#slide_show_3').fadeOut(time, function() {
  $(this).attr('src', imgs_3[n]).fadeIn(time);
});

n++;
if (n>=imgs_3.length) n = 0;
}
</script>

Neptunin,
https://javascript.ru/forum/misc/835...razheniya.html

Со стилями нет проблем, все работает. Не работают слайды по очереди, может один и тот же несколько раз показываться.

Neptunin,
переменные по разному назовите, или оберните каждый код как показано ниже.

(код1)();(код2)();(код3)();

Переменные изначально переименовал, оборачивание к сожалению не помогло. Скрипт перестает работать.

Neptunin,
так возьмите код предложенный выше #3

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

var coin = 1;
var changeBg = function() {
  $('.lf').css('background', 'url(Rasporyagheniya_1/' + coin++ + '.jpg)');
  if (coin > 3)
    coin = 1;
}
setInterval(changeBg, 3000);

var coin = 1;
var changeBg = function() {
  $('.cn').css('background', 'url(Pisma_2/' + coin++ + '.jpg)');
  if (coin > 3)
    coin = 1;
}
setInterval(changeBg, 3000);

var coin = 1;
var changeBg = function() {
  $('.rf').css('background', 'url(OTiPB_3/' + coin++ + '.jpg)');
  if (coin > 3)
    coin = 1;
}
setInterval(changeBg, 3000);

Neptunin,
а сделать 1 функцию для всех слайдеров или разные переменные объявить или обернуть код каждого слайдера?
выкинуть строки с 8 по 23, строки 11 и 19 поставить после строки 3.