jQuery-更改CSS屬性並重復

Question

我有這個Sprite工作表http://codepen.io/benasl/pen/yabpxo ，我想在結束后將其更改為另一個，第二個結束后，第一個需要重新開始，依此類推。我設法通過更改CSS屬性來做到這一點，但是現在如何使它們循環播放？

 setTimeout(function() { $(".kambarys2").css('display', 'block'); }, 3100); 

 body { background-color: #69e4c3; } .kambarys { background: url('http://i.imgur.com/pra08AS.jpg'); background-repeat: no-repeat; position: relative; display: inline-block; width: 380px; height: 372px; top: 100px; left: 40%; animation: convejor 3s steps(76) infinite; } @keyframes convejor { from { background-position: 0px; } to { background-position: -28880px; } } .kambarys2 { background: url('http://i.imgur.com/TFvZvWz.jpg'); background-repeat: no-repeat; position: absolute; display: inline-block; width: 380px; height: 372px; top: 108px; left: 40%; animation: convejor 3s steps(76) infinite; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="kambarys"></div> <div class="kambarys2"></div> 

Answer 1

一個答案是您有一個為此功能，並且該功能每X秒重新啟動一次。

例：

 function startcounter() { $( "#foo" ).append( "<p>Test</p>" ); // do what you want setTimeout(startcounter, 3*1000); // 3*1000 = 3 Seconds. } setTimeout(startcounter, 3*1000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo"><p>This is the div where the JS add every 3 Seconds a "Test".</p></div> 

Answer 2

• 使用數組更改背景圖像：

 var cnt=0,images=["http://i.imgur.com/TFvZvWz.jpg","http://i.imgur.com/pra08AS.jpg"] setInterval(function() { $(".kambarys").css({"background-image":"url("+images[cnt]+")"}); cnt++; if (cnt>=images.length) cnt=0; }, 3100); 

 body { background-color: #69e4c3; } .kambarys { background: url('http://i.imgur.com/pra08AS.jpg'); background-repeat: no-repeat; position: relative; display: inline-block; width: 380px; height: 372px; top: 100px; left: 40%; animation: convejor 3s steps(76) infinite; } @keyframes convejor { from { background-position: 0px; } to { background-position: -28880px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="kambarys"></div> 

• 切換兩個div

 var cnt=0; setInterval(function() { $(".kambarys0").toggle(cnt); $(".kambarys1").toggle(!cnt); cnt=!cnt }, 3100); 

 body { background-color: #69e4c3; } .kambarys0 { background: url('http://i.imgur.com/pra08AS.jpg'); background-repeat: no-repeat; position: relative; display: inline-block; width: 380px; height: 372px; top: 100px; left: 40%; animation: convejor 3s steps(76) infinite; } .kambarys1 { display:none; background: url('http://i.imgur.com/TFvZvWz.jpg'); background-repeat: no-repeat; position: relative; width: 380px; height: 372px; top: 100px; left: 40%; animation: convejor 3s steps(76) infinite; } @keyframes convejor { from { background-position: 0px; } to { background-position: -28880px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="kambarys0"></div> <div class="kambarys1"></div> 

• 循環兩個以上的div

 var cnt = 0; setInterval(function() { cnt++; if (cnt >= $(".kambarys").length) cnt = 0; $(".kambarys").hide(); $("#kambarys" + cnt).show(); }, 3100); 

 body { background-color: #69e4c3; } .kambarys { position: relative; display: inline-block; width: 380px; height: 372px; top: 100px; left: 40%; animation: convejor 3s steps(76) infinite; } #kambarys0 { background: url('http://i.imgur.com/pra08AS.jpg'); background-repeat: no-repeat; } #kambarys1 { display: none; background: url('http://i.imgur.com/TFvZvWz.jpg'); background-repeat: no-repeat; } #kambarys2 { display: none; background: url('http://i.imgur.com/F6bNA00.jpg'); background-repeat: no-repeat; } @keyframes convejor { from { background-position: 0px; } to { background-position: -28880px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="kambarys" id="kambarys0"></div> <div class="kambarys" id="kambarys1"></div> <div class="kambarys" id="kambarys2"></div>