0

有没有办法在 PHOTOSHOP 中将图像堆叠到 1 个“集合”中，这样​​您就可以将一些 jQuery 或 javascript 应用于该图像，以便在单击时显示每个堆叠的图像。

我正在编写一个程序，它有 150 个文件夹，每个文件夹包含 5 个图像，我想将它们显示为一个堆栈，遍历一组 5 个图像中的每一个。然后单击“下一步”并加载文件夹 2，您可以单击图像以浏览该组 5，依此类推...

好的，我需要更具体。这是我的索引页面：

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

这就是我想要的，如果您单击图像，则会出现下一个图像。

问题是我需要使 src 动态化。这适用于与索引页面相同的目录中的所有图像，但我有 50 个文件夹，名为 images1、images2、images3 .....，每个文件夹中有 1.jpg、2.jpg、3.jpg 等等等。有没有办法将 JS 中的 src 更改为扩展名 images1/imgs[++x] 并且还有一种方法可以使 '1' 动态

谢谢

4

1 回答 1

0

在堆叠图像之前，您应该从程序中传递每个图像的宽度，例如：

文件夹 1/galleryData.txt：

img1.jpg|340
img2.jpg|220
img3.jpg|540
img4.jpg|628
img5.jpg|342

比你能读的宽度：

var widths = []; // Array to store read widths

$.get('folder1/galleryData.txt', function(data) {

     var line = data.split('\n');
     for(var i=0; i<line.length; i++){
         widths.push( line.split('|')[1] );
     }
     alert( widths ); // 340,220,540,628,342 

});

现在数组宽度将包含所有可访问的堆叠图像宽度，例如

widths[2]; // 540

您现在可以使用计数器 [n] 并在单击某些按钮时获取所需的图像并为您的元素设置动画 -使用 jQuery的backgroundPosition 。

如果每个图像的宽度都相同......好吧，比工作更简单，你不需要创建注释，只需堆叠所有图像并做backgroundPosition动画

于 2013-08-04T17:11:39.923 回答