带多个数组的 Javascript 自动图像交换

Question

我目前正在研究图像旋转器。旋转部分已完成，但是我正在根据我发现的需要扩展功能。

目标：在包含硬编码图像的幻灯片的预设列表中旋转，但是在随后的每次旋转中，使用 js 为需要变化的特定幻灯片切换到新图像。

下面的脚本运行良好，但我觉得这不是最有效的方法。目前，我正在通过为我选择作为“不同”的每个特定幻灯片运行一个新的循环和函数来解决它。我的猜测是有一种方法可以使用一个函数和循环来完成，但我不太确定如何去做。

Anology：假设我有一个显示汽车列表的图像旋转器，它每 5 秒旋转到下一张幻灯片。每张幻灯片都是为不同型号的汽车指定的，但是对于某些型号，我想在整个旋转器的每次迭代中显示该型号的不同变体。

示例：

这里列出了旋转器每次通过的打印方式。

- Ford Focus
- Toyota Celica
- Hyundai Elantra
- Dodge Ram
- Motorcycle

- Ford Focus
- Toyota Celica GTS
- Hyundai Elantra
- Dodge Ram w/ additional accessories
- Motorcycle

- Ford Focus
- Toyota Celica w/ Spoiler
- Hyundai Elantra
- Dodge Ram different color
- Motorcycle

这是我当前的脚本：

<script>
window.onload=function() {
    imgCont = document.getElementById('example1');
    c_imgCont = document.getElementById('example2');
}

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slide");

    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1; 
    	if (typeof(imgCont) != 'undefined' && imgCont != null)
		{
			swapImage(); 
		}

		if (typeof(c_imgCont) != 'undefined' && c_imgCont != null)
		{
			swapImageExample2();
		}

    }
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, x[myIndex-1].dataset.timing);
}


    
var picPaths = ['image1.png','img2.png','img3.png','img4.png'];
var curPic = -1;
//preload the images for smooth animation
var imgO = new Array();
for(i=0; i < picPaths.length; i++) {
    imgO[i] = new Image();
    imgO[i].src = picPaths[i];
}

function swapImage() {
    curPic = (++curPic > picPaths.length-1)? 0 : curPic;
    imgCont.src = imgO[curPic].src;
}

var c_picPaths = ['otherimg1.png','otherimg2.png'];
var c_curPic = -1;
//preload the images for smooth animation
var c_imgO = new Array();
for(l=0; l < c_picPaths.length; l++) {
    c_imgO[l] = new Image();
    c_imgO[l].src = c_picPaths[l];
}

function swapImageExample2() {
    c_curPic = (++c_curPic > c_picPaths.length-1)? 0 : c_curPic;
    c_imgCont.src = c_imgO[c_curPic].src;
}


</script>

Answer 1

为什么不直接调整您的数据结构，使picPaths 数组中的任何“图像”都可以是图像路径数组。然后使用一个函数来获取要显示的图像路径。请参阅下面的简单示例。

注意picPaths 的结构。另请注意，在 picPaths 数组的每次迭代中，旋转（运输、自然）中的第 2 和第 4 个图像会旋转不同的图像。

<img id="example1" src="http://lorempixel.com/400/200/cats/1/"/>


<script>
    window.onload = function() {
        imgCont = document.getElementById('example1');
        swapImage();
    }

    var picPaths = [
            "http://lorempixel.com/400/200/cats/1/",
            [
                "http://lorempixel.com/400/200/transport/1/",
                "http://lorempixel.com/400/200/transport/2/",
                "http://lorempixel.com/400/200/transport/3/",
                "http://lorempixel.com/400/200/transport/4/"
            ],
            "http://lorempixel.com/400/200/animals/1/",
            [
                "http://lorempixel.com/400/200/nature/1/",
                "http://lorempixel.com/400/200/nature/2/",
                "http://lorempixel.com/400/200/nature/3/",
                "http://lorempixel.com/400/200/nature/4/",
                "http://lorempixel.com/400/200/nature/5/"
            ],
            "http://lorempixel.com/400/200/sports/1/"
        ],
        curImg = 0;

    function getImagePath(path) {
        if(Array.isArray(path)) {
            var temp = path.shift();
            path.push(temp);
            return temp;
        }
        else {
            return path;
        }
    }

    function swapImage() {
        curImg = curImg < (picPaths.length - 1) ? curImg : 0;        
        var imgPath = getImagePath(picPaths[curImg]);
        console.clear();
        console.log('current index in picPaths:', curImg, 'current image path to display:', imgPath);
        imgCont.src = imgPath;
        curImg++;
        setTimeout(function() {
            swapImage();
        }, 4000);
    }
</script>

根据您的评论，我做了第二个示例。我想这就是你的意思。

window.onload = function() {
    carousel(picPaths, 'slide');
};

var picPaths = [
        "https://placeimg.com/640/480/any/sepia/1",
        [
            "https://placeimg.com/640/480/tech/1",
            "https://placeimg.com/640/480/tech/2",
            "https://placeimg.com/640/480/tech/3",
            "https://placeimg.com/640/480/tech/4"
        ],
        "https://placeimg.com/640/480/animals/1",
        [
            "https://placeimg.com/640/480/nature/1",
            "https://placeimg.com/640/480/nature/2",
            "https://placeimg.com/640/480/nature/3",
            "https://placeimg.com/640/480/nature/4",
            "https://placeimg.com/640/480/nature/5"
        ],
        "https://placeimg.com/640/480/arch/1"
    ];

function carousel(imgPaths, imgClass) {
    var imgs = document.getElementsByClassName(imgClass);

    Array.prototype.forEach.call(imgs, function(imgElem, idx) {
        var timing = imgElem.dataset.timing,
            path = imgPaths[idx];

        swapImage(imgElem, path, timing);
    });

    function getImagePath(path) {
        if(Array.isArray(path)) {
            var temp = path.shift();
            path.push(temp);
            return temp;
        }
        else {
            return path;
        }
    };

    function swapImage(imgElem, path, timing) {
        var imgPath = getImagePath(path);

        imgElem.src = imgPath;
        setTimeout(function() {
            swapImage(imgElem, path, timing);
        }, timing);
    };
}

.slide {
  width: 100px;
}

<div id="container">
  <img id="slide_1" class="slide" src="" data-timing="8000">
  <img id="slide_2" class="slide" src="" data-timing="4000">
  <img id="slide_3" class="slide" src="" data-timing="10000">
  <img id="slide_3" class="slide" src="" data-timing="6000">
</div>