平滑轮播

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);

猜你喜欢