Javascript 一个图像元素中有多个图像源

我对Javascript（没有jquery pls）非常陌生，我正在尝试弄清楚是否可以将多个图像源放在一个图像元素中

sadImages = document.createElement("img");
sadImages.src = "video/sadness/sadPhoto1.png";
sadImages.className = "projectImages";
sadScrollContainer.append(sadImages);

我想在不创建太多图像元素的情况下，从悲伤文件夹（不是全部！）中再添加一些图像

我试着像这样写

sadImages.src = "video/sadness/sadPhoto1.png" + "video/sadness/sadPhoto2.png";

及

及

但这不起作用。这可能真的很愚蠢，但我正试图让我的代码尽可能简短。

也许srcset或大小是有用的

有榜样

<img srcset="sad-480w.jpg 480w,
             sad-800w.jpg 800w"
     sizes="(max-width: 600px) 480px, 800px"
 src="sad-800w.jpg"
 alt="sad">

也许srcset或大小是有用的

有榜样

<img srcset="sad-480w.jpg 480w,
             sad-800w.jpg 800w"
     sizes="(max-width: 600px) 480px, 800px"
 src="sad-800w.jpg"
 alt="sad">

---

您无法创建一个图像元素，其中包含少量图像

要不手动创建图像，您可以创建数组，其中存储所有图像的路径，然后只为数组中的每个路径创建img元素

const images = 
['video/sadness/sadPhoto1.png','video/sadness/sadPhoto2.png']
images.forEach((img)=>{
    sadImages = document.createElement("img");
    sadImages.src = img;
    sadImages.className = "projectImages";
    sadScrollContainer.append(sadImages);
})

---

无法创建一个内部图像较少的图像元素

要不手动创建图像，您可以创建数组，其中存储所有图像的路径，然后只为数组中的每个路径创建img元素

const images = 
['video/sadness/sadPhoto1.png','video/sadness/sadPhoto2.png']
images.forEach((img)=>{
    sadImages = document.createElement("img");
    sadImages.src = img;
    sadImages.className = "projectImages";
    sadScrollContainer.append(sadImages);
})

---

如果要在图像源列表中旋转，则必须为图像元素指定数据属性。这可以通过访问属性来实现

const createMultiImage=（源代码，起始索引=0）=>{
const img=新图像（）；
img.className='multi-image'；
img.dataset.currentIndex=开始索引；
img.dataset.sources=JSON.stringify（sources）；
img.src=来源[起始索引]；
返回img；
};
常数
持续时间=2000年，
container=document.querySelector（“#container”），
multiImage=createMultiImage([
"http://placekitten.com/200/200",
"http://placekitten.com/200/300",
"http://placekitten.com/300/200",
"http://placekitten.com/300/300"
]);
常数
incrMulti=（img，count）=>{
常数
sources=JSON.parse（img.dataset.sources），
currentIndex=parseInt（img.dataset.currentIndex，10），
nextIndex=（currentIndex+count+sources.length）%sources.length；
img.src=来源[nextIndex]；
img.dataset.currentIndex=nextIndex；
},
nextMulti=img=>incrmmulti（img，1），
prevMulti=img=>incrMulti（img，-1），//未使用
nextMultiAll=（）=>document.queryselectoral（'.multi-image'）.forEach（nextMulti）；
container.append（多图像）；
设置间隔（nextMultiAll，持续时间）
如果要在图像源列表中旋转，必须为图像元素指定数据属性。这可以通过访问属性来实现


const createMultiImage=（源代码，起始索引=0）=>{
const img=新图像（）；
img.className='multi-image'；
img.dataset.currentIndex=开始索引；
img.dataset.sources=JSON.stringify（sources）；
img.src=来源[起始索引]；
返回img；
};
常数
持续时间=2000年，
container=document.querySelector（“#container”），
multiImage=createMultiImage([
"http://placekitten.com/200/200",
"http://placekitten.com/200/300",
"http://placekitten.com/300/200",
"http://placekitten.com/300/300"
]);
常数
incrMulti=（img，count）=>{
常数
sources=JSON.parse（img.dataset.sources），
currentIndex=parseInt（img.dataset.currentIndex，10），
nextIndex=（currentIndex+count+sources.length）%sources.length；
img.src=来源[nextIndex]；
img.dataset.currentIndex=nextIndex；
},
nextMulti=img=>incrmmulti（img，1），
prevMulti=img=>incrMulti（img，-1），//未使用
nextMultiAll=（）=>document.queryselectoral（'.multi-image'）.forEach（nextMulti）；
container.append（多图像）；
设置间隔（nextMultiAll，持续时间）
是否可以用空格连接它们
sadImages.src=[“video/said/sadPhoto1.png”，“video/said/sadPhoto2.png”]。join（“”）
sadImages.src=[“video/said/sadPhoto1.png”，“video/said/sadPhoto2.png”]。加入（“”）
我试过这个，但没用。哦，好的，谢谢！如果可能的话会很有用的…哦，好的，谢谢！如果有可能的话会很有用的。。