div内にあるdivをJS

Question

で移動するImはcsgoempire.comによく似たスピナーを作成しようとしていますが、私はいくつかの問題があります（JSには全く新しいものですが、 HTML）。私は、それぞれの画像に1つのdivを作成し、それぞれに別のJS機能を持たせるなど、たくさんのものを試しましたが、思った後、効率的ではなく、後で変更するのが難しくなると思いました。私はその後、各写真に別々のdivを作成することにしましたが、すべてをJS機能によって移動される別のdivに配置することにしました。これは以前よりもはるかに効率的になるでしょうが、私はそれを働かせるように見えることはできませんし、（うまくいけば）より良い方法があります。

console.log("Connected to server.") 
 

 

 

 
function spin() { 
 
    console.log("Starting Spin."); 
 
    var boxElement = document.getElementById('allBoxes'); 
 
    var pos = 900; 
 
    var id = id; 
 
    setInterval(frame, 1); 
 

 
    function frame() { 
 
    if (pos == 100) { 
 
     clearInterval(id) 
 
    } else { 
 
     pos--; 
 
     boxElement.style.left = pos + 'px'; 
 
    } 
 
    } 
 
}

<div id="allBoxes"> 
 

 
    <div id="box2" style="position:absolute; left:712pt; top:150pt; width:50px; height:50px;"><img src="http://www.theaa.ie/winterhub/wp-content/uploads/2015/12/AA-logo-50x50.png" /></div> 
 
    <div id="box1" style="position:absolute; left:675pt; top:150pt; width:50px; height:50px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAALVBMVEXGAA4fHx////98fHz8/Pzy8vItLS1xcXFnZ2eIiIhdXV2PCxQtHR64Aw9XFRmYSViLAAAAnklEQVRIie2UyQ6DMAxEyZAd2v//3JolAuWQdKyqAok5WDn4ZRQvGYZHj0SmqTsivs71PSS7KBEwJUaX24h3sOGMBAvn2y7RAuOBjICNvbcEAKkgckDoV0wuRkGwWH5R5HRGUr/I2FWff4toun9V5G8VY1upGRh+LPnh16wYv8ia70LR/SsilaaZSN71etNIMaKQzYhDViMWESMauZE+q+cGCDwyhBUAAAAASUVORK5CYII=" 
 
     /></div> 
 

 
    </div> 
 

 

 

 
    <button onclick="spin()"> Click Me! </button>

この：同上本当に

私はそれがより効率的に行うことができます方法についていくつかのヒントを感謝し、私の現在の問題の修正:)

ここではそのすべての栄光のコードがあります私はちょうどグーグルグーグルで行われ、テストのもので、私はその不名誉に悪いと非効率的だと確信しています：P（私はこのようにしたいことを行うことが可能かどうか知りません..）

問題はスピナーが回転しないこと私がそれらを別々に動かすと、それはdivの内側にあるときではなく、divを動かす。そのうちの1つだけを動かして複数のdivを移動する方法はありますか？もっと良い方法を知っていれば、これを行う別の方法をお勧めできますか？

最後の目標は、スチームから各ユーザーの画像を取得し、それらの画像を「スピナー」内で使用し、その上に着地しているユーザーのユーザー名を出力する中間を指す矢印を作成し、タイマーが0になったら起動しますが、今は勉強しようとしています。学習する最善の方法は、プロジェクトを作成することです（難しいプロジェクトを少しでも選んでいるかもしれません）。

... 
var pos = 900; 
var id = setInterval(frame, 1); 
function frame() { 
... 

メイドjsFiddleを解決して：あなたはそれを止めることができるように）

Answer 1

あなたは間隔を保存していないhttps://jsfiddle.net/bfrhw7rf/1/

---

ここのように、スピナーを作成するために、CSSを使って考えてみましょう：https://projects.lukehaas.me/css-loaders/

あなたはあなたがブロックしていないCSSで、あなたのJavaScriptを実行し、単一スレッドを使用している、非常に短い間隔を使用しているので残りのコード。