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

在javascript中使图像的源动态化

1 个答案: