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

我目前正在做一个图像旋转器。旋转部分已经完成，但是我正在根据我发现的需求扩展功能

目标：在包含硬编码图像的预设幻灯片列表中旋转，但是在随后的每次旋转中，使用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

以下是我当前的脚本：

window.onload=function（）{
imgCont=document.getElementById（'example1'）；
c_imgCont=document.getElementById（'example2'）；
}
var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“幻灯片”）；
对于（i=0；ix.length）{myIndex=1；
if（typeof（imgCont）！=“未定义”&&imgCont！=null）
{
swapImage（）；
}
if（typeof（c_imgCont）！=‘未定义’和&c_imgCont！=null）
{
swapImageExample2（）；
}
}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，x[myIndex-1].dataset.timing）；
}
var picpath=['image1.png'、'img2.png'、'img3.png'、'img4.png']；
var curPic=-1；
//为平滑动画预加载图像
var imgO=新数组（）；
对于（i=0；ipicpath.length-1）？0:curPic；
imgCont.src=imgO[curPic].src；
}
var c_picpath=['otherimg1.png'，'otherimg2.png']；
var c_curPic=-1；
//为平滑动画预加载图像
var c_imgO=新数组（）；
对于（l=0；lc_picpath.length-1）？0:c_curPic；
c_imgCont.src=c_imgO[c_curPic].src；
}

为什么不调整数据结构，使

picpath

数组中的任何“图像”都可以是图像路径数组。然后使用函数获取要显示的图像路径。请参见下面的简单示例

请注意

picpath

的结构。还请注意，旋转中的第2个和第4个图像（传输、自然）在

picpath

数组的每次迭代中通过不同的图像旋转

window.onload=函数（）{
imgCont=document.getElementById（'example1'）；
swapImage（）；
}
变量picpath=[
"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；
函数getImagePath（路径）{
if（数组.isArray（路径））{
var temp=path.shift（）；
路径推送（温度）；
返回温度；
}
否则{
返回路径；
}
}
函数swapImage（）{
curImg=curImg<（picpath.length-1）？curImg:0；
var imgPath=getImagePath（picpath[curImg]）；
console.clear（）；
log（'picpath中的当前索引：'，curImg，'要显示的当前图像路径：'，imgPath）；
imgCont.src=imgPath；
curImg++；
setTimeout（函数（）{
swapImage（）；
}, 4000);
}

小心使用术语-与道歉相比，在我的行业中，此特定产品被称为旋转器（因为它在幻灯片中自动旋转）。一定要小心！谢谢，我完全明白你在说什么！我看到的唯一问题是它使用了一个设置的超时持续时间。如何使每张幻灯片都充满活力？仅提供一个我现在所做的示例：

数据计时是每张幻灯片的超时值。添加了我认为您需要的第二个示例。