html:
<div id="box"> <div class="li1" style="background-color:red;top:-150px;z-index: 10;">4</div> <div class="li1" style="background-color:yellow;top:0;z-index: 10;">1</div> <div class="li1" style="background-color:blue;top:150px;z-index: 10;">2</div> <div class="li1" style="background-color:green;top:300px;z-index: 10;">3</div> </div> <div id="ipt"> <input type="button" id="left" value="Down" onclick="goLeft()"> <input type="button" id="right" value="Up" onclick="goRight()">
css:
*{ padding: 0; margin: 0; list-style: none; } #box{ width: 200px; height: 150px; position: relative; top:0; left:0; right:0; margin:0 auto; border:1px solid black; color: #fff; overflow: hidden; } .li1{ position: absolute; width: 200px; height: 150px; text-align: center; line-height: 150px; /*transition: 1s;*/ } #ipt{ width: 20px; height: 150px; top:0; left: 500px; position: absolute; display: flex; justify-content: space-between; align-items: center; flex-direction: column; }
js:
var Box=document.getElementById("box"); var Li=Box.getElementsByClassName("li1"); var Left=document.getElementById("left"); var Right=document.getElementById("right"); function goLeft(){ for(var i=0;i<Li.length;i++){ Li[i].style.top= (parseFloat( Li[i].style.top)) + 150 + "px"; Li[i].style.transition="1s"; Left.disabled=true; if(parseFloat( Li[i].style.top)=="450"){ Li[i].style.transition=""; Li[i].style.top= -150+"px"; } time1; } } var time1=setInterval(function () { Left.disabled=false; },1020); function goRight(){ for(var i=0;i<Li.length;i++){ Li[i].style.top= (parseFloat( Li[i].style.top)) - 150 + "px"; Li[i].style.transition="1s"; Right.disabled=true; if(parseFloat( Li[i].style.top)=="-300"){ Li[i].style.transition=""; Li[i].style.top= 300+"px"; } time2; } } var time2=setInterval(function () { Right.disabled=false; },1020);