1つの要素に対し、繰り返し連番のclassを付与したい

###前提

とある製品のプロダクトサイトを作成しています。
その中で、製品の紹介ページで商品画像を360度（z軸）で回転させるページがあるのですが、掲題の処理ができずに困っています。

###実現したいこと
画像はbackgroundで指定しており、classを1ずつ増やし、付与されているclassによって背景画像を指定し、回転しているように見せようと思っているのですが、1つの要素に対し連番の処理を行うことができません。

###試したこと
繰り返しの処理を行うので、for文を使用してみたのですが、下記のコードですと、number1〜number360というclassが一気に付与されてしまいます。
また、上記の処理が360まで繰り返したら、また1から始まるようにもしたいです。

よろしくお願いいたします。
###該当のソースコード

	for (i=1; i<101; i++) {
		$('#item').addClass('number'+i);
	}

kei344

2016/12/07 18:45

#itemが複数あるのでしょうか。その場合HTMLの文法違反になるため、そもそもコードを変える必要があります。どういう要素（HTML）にclassを振りたいかなどもう少し具体的に記述いただけませんか？

行動規範の内容に同意します

回答3件

質問に対して答えになっていませんが、
画像を回転させたいのであればcssのtransformプロパティのrotateを使用してみてはいかがでしょうか。

HTML
1img {
2  -webkit-animation: rotate 3s infinite;
3  animation: rotate 3s infinite;
4}
5
6@keyframes rotate {
7    from {
8      -webkit-transform: rotateY(360deg);
9      transform: rotateY(360deg);
10    }
11
12    to {
13      -webkit-transform: rotateY(360deg);
14      transform: rotateY(0deg);
15    }
16}
17

投稿2016/12/08 00:12

mukkun

総合スコア882

www-www

2016/12/18 02:57

お返事が遅くなり申し訳ありません。コメントいただきありがとうございました！

行動規範の内容に同意します

ベストアンサー

トリガーとタイミングをどうしたいかわからなのですが
定期処理はsetIntervalで対応してください
とりあえず3パターンの切り替えだけ提示します、あとは応用してください

HTML
1<style>
2.number1{background-Color:lime;}
3.number2{background-Color:red;}
4.number3{background-Color:aqua;}
5</style>
6<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7<script>
8$(function(){
9  var counta=1;
10  var max=3;
11  setInterval(function(){
12    $('#item').removeClass('number'+counta);
13    counta=counta%max+1;
14    $('#item').addClass('number'+counta);
15    },1000);
16});
17</script>
18
19<div id="item" class="number1">hoge</div>