问题描述:

I am making a simple carousel animation. I want to rotate an image after button is clicked.

The problem is, jQuery is working for the first figure only (changes degree in CSS correctly). The rest of the figures are untouched.. What am I doing wrong?

Here is my project:

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

And the code I am trying to use is not working here:

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

Obviously I want to replace "60" with the amount that will be counted by 360/ImagesAmount but for now I placed 6 and I want to move it 60 degrees.

Please, look at my website, the code and tell me what is wrong here.

Do I need to use a loop here?

I found this code here, and it's working there without any loop:

http://demosthenes.info/blog/690/Simple-CSS-3D-Carousel-Gallery

网友答案:

The querySelector method will only return the first element that matches the selector, even if there are several in the document. What you'd want is querySelectorAll, which returns a nodeList of all the matches, so you can then loop through with Array.prototype.forEach as described in this MDN article.

However, since you mention your project includes jQuery, you can make your life a lot easier by using it (the snippet you gave only appears to use regular 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);

Hope this helps.

网友答案:

Well, both querySelectorAll and attr did now work for me. Nothing is happening. Now, even the first figure is not rotating.

Can anyone look at my code and tell me if it is ok? It's just the implementation of the carousel so far.

网友答案:

There is a small mistake in the article you posted along. There it says:

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

and it should be:

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

so the -z is to much.

相关阅读:
Top