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的结构。另请注意，旋转（传输，自然）中的第2和第4个图像在picPaths数组的每次迭代中旋转通过不同的图像。

<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>

具有多个阵列的Javascript自动图像交换

1 个答案: