Z-インデックスを使用してdivをスクロール

Question

3つのdivがすべて0,0pxの位置にあります。

ディビジョン1（Z-インデックス：0） ディビジョン2（Z-インデックス：1） ディビジョン3（Z-指数：2）

だろう、私はすべての30秒後に順番を変えどのようにそれそうソートのすべてのdivをループします（IDタグを使用）。 30秒後にDiv 2が一番上、Div 1が一番下に、その後30秒後にDiv 3が一番上に、Div 2が一番下など。

Answer 1

フレームワークは必要ありませんまたはそのようなもの。これは実際には非常に簡単です。ここでは、jQueryをlibとして使用している簡単なデモがありますが、必要に応じてこれをすべてバニラで実行することもできます。

https://jsfiddle.net/jL2youk6/

あなたがする必要があるすべては、間隔を設定し、インデックスをインクリメントし、そのインデックスでのdivを選択し、「アクティブ」クラスまたはセットのみのZインデックスを持っている何かを割り当てています。

var $box = $('.box'), 
 
    active_box = 0, 
 
    time = 30000; 
 

 
setInterval(function() { 
 

 
    // Check out active box index 
 
    if (active_box < $box.length - 1) { 
 
    active_box++ 
 
    } else { 
 
    active_box = 0; 
 
    } 
 
    
 
    // Set the active and remove active from siblings 
 
    $box.eq(active_box).addClass('active').siblings().removeClass('active') 
 

 
}, time);

.box { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100px; 
 
    width: 100px; 
 
    z-index: 0; 
 
} 
 

 
.active { 
 
    z-index: 2; 
 
} 
 

 
#a { 
 
    background-color: red; 
 
} 
 

 
#b { 
 
    background-color: blue; 
 
} 
 

 
#c { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box active' id='a'>1</div> 
 
<div class='box' id='b'>2</div> 
 
<div class='box' id='c'>3</div>