Question

我正在制作一个简单的旋转木马动画。我想在单击按钮后旋转图像。问题是，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

Answer 1

querySelector方法只返回与选择器匹配的第一个元素，即使文档中有多个元素也是如此。你想要的是querySelectorAll，它会返回所有匹配的nodeList，因此您可以按照this MDN article中的描述使用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);

希望这有帮助。

Answer 2

嗯，querySelectorAll和attr现在都适用于我。什么都没发生。现在，即使是第一个数字也没有旋转。

任何人都可以查看我的代码并告诉我它是否正常？到目前为止，这只是旋转木马的实现。

Answer 3

您发布的文章中存在一个小错误。它说：

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

应该是：

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

所以-z很多。

jQuery setAttribute仅影响第一个数字

3 个答案: