0

我正在制作一个简单的轮播动画。单击按钮后，我想旋转图像。问题是，jQuery 仅适用于第一个数字（正确更改 CSS 中的程度）。其余的数字都没有动过。我做错了什么？这是我的项目：

http://ww2.ii.uj.edu.pl/~kadluczs/PSI/

而且我尝试使用的代码在这里不起作用：

spinner = document.querySelector("#spinner figure");
if (!sign) { angle = angle + 60; } else { angle = angle - 60; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg)");
setCurrent(current);

显然，我想用 360/ImagesAmount 计算的数量替换“60”，但现在我放置了 6，我想将它移动 60 度。

请查看我的网站，代码并告诉我这里有什么问题。我需要在这里使用循环吗？

我在这里找到了这段代码，它在那里工作，没有任何循环： http ://demosthenes.info/blog/690/Simple-CSS-3D-Carousel-Gallery

4

3 回答 3

0

该querySelector方法将仅返回与选择器匹配的第一个元素，即使文档中有多个元素。您想要的是querySelectorAll，它返回nodeList所有匹配项中的 a ，因此您可以按照此 MDN 文章Array.prototype.forEach中的描述循环使用。

但是，由于您提到您的项目包含 jQuery，因此使用它可以让您的生活更轻松（您提供的代码段似乎只使用常规 JavaScript）：

spinner = $("#spinner figure");
if (!sign) { angle = angle + 60; } else { angle = angle - 60; }
spinner.attr("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg)");
setCurrent(current);

希望这可以帮助。

于 2013-10-17T11:31:23.853 回答
0

好吧，两者都querySelectorAll对attr我有用。什么都没有发生。现在，即使是第一个数字也没有旋转。

任何人都可以查看我的代码并告诉我是否可以？到目前为止，这只是轮播的实现。

于 2013-10-17T11:55:05.320 回答
0

您发布的文章中有一个小错误。那里说：

figure#spinner img { ... transform-origin-z: 50% 50% -500px; ... }

它应该是：

figure#spinner img { ... transform-origin: 50% 50% -500px; ... }

所以-z太多了。

于 2013-10-17T12:05:34.447 回答