Как побороть функцию в JavaScript?

Question

[Ярослав Рыженко]

ЗАДАЧА:
Нужно сделать, что-бы в двух блоках менялись картинки из двух разных папок, т.е. для блока №1 - папка №1, а для блока №2 - папка №2 соответственно.
НАПИСАННЫЙ КОД:

function abc(c) {
    var picture = document.getElementById(c);
    var picArr = [["pic/1/1.jpg", "pic/1/2.jpg", "pic/1/3.jpg"], ["pic/2/1.jpg", "pic/2/2.jpg", "pic/2/3.jpg"]];
    var picIndex = 0;
    function super1(a, b) {
        function changePic() {
            a.setAttribute("src", b[picIndex]);   
            picIndex++;  
            if (picIndex >= b.length) {
                picIndex = 0;
            }
        }
        var pupu = setInterval(changePic, 2000);
        }
    super1(picture, picArr[0]);
    super1(picture, picArr[1]);
}
abc("block1");
abc("block2");

В итоге достичь нужного результата мне не удалось. Изображения в блоки подключаются из одной папки. Как решить эту проблему? Помогите люди добрые. :)

P/S: Я так понял загвоздка где-то в "super1(picture, picArr[0]); super1(picture, picArr[1]);"?

ЗАРАНЕЕ БЛАГОДАРЕН ГУРУ ЗА ОТВЕТ.

Answer 1

[Maks Codov]

попробуйте в функцию передать два аргумента (селекторы блоков) и определять разные picture и им менять картинки из соответствующих массивов.
попробую угадать, у вас картинки с папки pic/2/

function abc(c, d) {
    var picture = document.getElementById(c);
    var picture2 = document.getElementById(d);
    var picArr = [["pic/1/1.jpg", "pic/1/2.jpg", "pic/1/3.jpg"], ["pic/2/1.jpg", "pic/2/2.jpg", "pic/2/3.jpg"]];
    var picIndex = 0;
    function super1(a, b) {
        function changePic() {
            a.setAttribute("src", b[picIndex]);   
            picIndex++;  
            if (picIndex >= b.length) {
                picIndex = 0;
            }
        }
        var pupu = setInterval(changePic, 2000);
        }
    super1(picture, picArr[0]);
    super1(picture2, picArr[1]);
}
abc("block1","block2");

Comments

[Ярослав Рыженко]

Да, с папки pic/2/

[Maks Codov]

пробуйте так. изменил ответ

[Ярослав Рыженко]

Maks: 2 блока тянет, а вот три уже не хочет. Странно:
function getPictures(a, b, c) {
var picBlock1 = document.getElementById(a);
var picBlock2 = document.getElementById(b);
var picBlock3 = document.getElementById(c);

var picArr = [["pic/1/1.jpg", "pic/1/2.jpg", "pic/1/3.jpg"], ["pic/2/1.jpg", "pic/2/2.jpg", "pic/2/3.jpg"], ["pic/3/1.jpg", "pic/3/2.jpg", "pic/3/3.jpg"]];
var picIndex = 0;

function getAttr(g, j) {

function changeSrc() {
g.setAttribute("src", j[picIndex]);
picIndex++;
if (picIndex >= j.length) {
picIndex = 0;
}
}

var inter = setInterval(changeSrc, 2000);
}

getAttr(picBlock1, picArr[0]);
getAttr(picBlock2, picArr[1]);
getAttr(picBlock3, picArr[2]);

}

getPictures("block1","block2", "block3");

[Maks Codov]

Ярослав Рыженко: Я бы хотел предложить немного поменять логику работы. setInterval сейчас неоправданно много запускается и сжирает память. Настоятельно советую с функции getAttr убрать setInterval. А вместо этого обернуть в рекурсивный setTimeout запуск функций getAttr(picBlock1, picArr[0]);getAttr(picBlock2, picArr[1]);getAttr(picBlock3, picArr[2]);
Я везде где смог поменял setInterval на рекурсивный setTimeout
Как рекурсивно запускать setTimeout есть на сайте Ильи Кантора. https://learn.javascript.ru/settimeout-setinterval
поправите это, если не заработает, то можно будет где-то опробовать функцию онлайн