在javascript中使图像源动态化

Question

查看以下html

 <html>
 <head>
    <title>index</title>
 </head>
 <body>

 <img src="1.jpg" id="displayimage" alt="" onmousedown="change()">

 <script src="scripts.js"></script>
 </body>
 </html>

以及相关的 JavaScript

 imgs=Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", "17.jpg", "18.jpg", "19.jpg", "20.jpg", "21.jpg", "22.jpg", "23.jpg", "24.jpg");
 var x=0;

 function change() {
 document.getElementById("displayimage").setAttribute("src", imgs[++x]);
 if (x==23) {
 x=0;
  }
  }

我需要使图像源动态化-无论如何在 JS 中有图像源的扩展名，即 images1/img[++x] ？这段代码工作得很好，因为我的 24 张图片与这些文件位于同一目录中，但我有多个文件夹 images1、images2、images3 等，每个文件夹都包含 24 张图片，我希望能够显示第一组（比如，images1 /)，然后允许用户单击“下一步”并加载第二组 (images2/)。

Answer 1

你可以试试这个，

imgs=["1.jpg", "2.jpg", "3.jpg", "4.jpg",....];
var x=0;var f=['images1','images2','images3'];//folders array
var j=0;// for folder index
function change() {
   //initially folder is images1
   document.getElementById("displayimage").setAttribute("src", f[j]+'/'+imgs[++x]);
   if (x==23) {
      x=0;
      j++;// increase folder array index for next folder like images2,images3, etc;
   }
}