Question

有没有办法将图像堆叠成1'集'，在PHOTOSHOP中，您可以将一些jQuery或javascript应用于该图像，以便在您点击它时显示每个堆叠图像。

我正在编写一个程序，其中包含150个文件夹，每个文件夹包含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'动态

由于

Answer 1

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

的folder1 / 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 动画

jQuery在photoshop中显示“堆叠图像”

1 个答案: