移动轮播

最新推荐文章于 2024-09-18 10:06:47 发布

原创最新推荐文章于 2024-09-18 10:06:47 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动轮播

jsdemo 专栏收录该内容

35 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
       .all{
           height:100px;
           width:100px;
           border:1px solid #000;
           position:relative;
           margin:100px auto 0 auto;
           overflow: hidden;
       }
       .move{
           position:relative;
           width:500px;
           height:100px;

       }
        .move>div{
            height:100px;
            width:100px;
            color:white;
            font-size:40px;
            text-align:center;
            line-height:100px;
            float:left;
        }
        .one{
            background:red;
        }
        .two{
            background:greenyellow;
        }
        .three{
            background:blue;
        }
        .four{
            background:purple;
        }
        .five{
            background:yellow;
        }
        input{
            height:20px;
            width:40px;
        }
        .xxx{
            width:100px;
            margin:0 auto;
        }
        #right{
            margin-left:10px;
        }
    </style>
</head>
<body>
    <div class="all" id="all">
        <div class="move" id="move">
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="three">3</div>
            <div class="four">4</div>
            <div class="five">5</div>
        </div>
    </div>
    <div class="xxx">
        <input type="button" value="prev" id="left">
        <input type="button" value="next" id="right" style="left:50px;">
    </div>
<script>
    window.onload=function(){
        var oLeft=document.getElementById("left");
        var oRight=document.getElementById("right");
        var oMove=document.getElementById("move");
        var aDiv=oMove.getElementsByTagName("div");
        var iSpeed=1;

        oRight.onclick=function(){
            var timer=setInterval(function(){
                oMove.style.left=oMove.offsetLeft-iSpeed+"px";
                iSpeed++;
                if(oMove.offsetLeft<-100){
                    oMove.offsetLeft=0;
                    clearInterval(timer);
                    oMove.style.left=0+"px";
                    var rua=oMove.removeChild(aDiv[0]);
                    oMove.appendChild(rua);
                }
            },100);
        }
       oLeft.onclick=function(){
           oMove.style.left=-100+"px";
           var rua=oMove.removeChild(aDiv[aDiv.length-1]);
           oMove.insertBefore(rua,aDiv[0]);
           var timer=setInterval(function(){
               oMove.style.left=oMove.offsetLeft+iSpeed+"px";
               iSpeed++;
                if(oMove.offsetLeft>0){
                    oMove.style.left=0;
                    clearInterval(timer);
                }

           },100)
       }





    }
</script>
</body>
</html>