首页 > > 网页制作 > css >

使用js实现带有停顿效果的图片滚动（按钮控制）

2018-06-24 00:15:31来源：未知阅读 ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动2</title>
    <style>
    #warp{
        width: 1250px;
        height: 300px;
        overflow: hidden;
        margin:100px auto 0;
        overflow-x: auto;
    }
    #warp #con{
        width: 4000px;
        height: 300px;
        overflow: hidden;
    }
    #warp #con #box1{
         float: left;
         overflow: hidden;
    }
    #warp #con #box2{
         float: left;
         overflow: hidden;
    }
    #warp img{
        float: left;
        margin-right: 10px;
        width: 200px;
        height: 300px;
    }
    .btn{
        text-align: center;
        margin-top: 10px;
    }
    .btn button{
        font-size: 16px;
    }
    </style>
</head>
<body>
    <div id="warp">
        <div id="con">
            <div id="box1">
                <img src="images/meinv1.jpg" alt="">
                <img src="images/meinv2.jpg" alt="">
                <img src="images/meinv3.jpg" alt="">
                <img src="images/meinv4.jpg" alt="">
                <img src="images/meinv5.jpg" alt="">
                <img src="images/meinv6.jpg" alt="">
            </div>
            <div id="box2"></div>
        </div>
    </div>
    <div class="btn">
        <button id="scrollL"><<左滚</button>
        <button id="scrollR">右滚>></button>
    </div>
    <script>
        var warp=document.getElementById('warp');
        var con=document.getElementById('con');
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');
        var img=box1.getElementsByTagName('img')[0];
        var scrollL=document.getElementById('scrollL');
        var scrollR=document.getElementById('scrollR');
        var timer1=null,timer2=null,flage=1;
        box2.innerHTML=box1.innerHTML;
        max=box1.clientWidth;
        imgmax=img.clientWidth+10;
        function scrollLeft(){
            flage=1;
            clearInterval(timer1);
            timer1=setInterval(function(){
                warp.scrollLeft++;
                if (warp.scrollLeft>=max) {
                    warp.scrollLeft=0;
                }
                if(warp.scrollLeft%imgmax==0){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2=setTimeout(function(){
                        timer1=setInterval(scrollLeft,5)
                    },2000)
                }
            },5)
        }
        function scrollRight(){
            flage=0;
            clearInterval(timer1);
            timer1=setInterval(function(){
                warp.scrollLeft--;
                if (warp.scrollLeft<=0) {
                    warp.scrollLeft=max;
                }
                if(warp.scrollLeft%imgmax==0){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2=setTimeout(function(){
                        timer1=setInterval(scrollRight,5)
                    },2000)
                }
            },5)
        }
            scrollLeft();
        scrollL.onclick=function(){
            // clearInterval(timer1);
            // clearTimeout(timer2);
            scrollLeft();
        }
        scrollR.onclick=function(){
            // clearInterval(timer1);
            // clearTimeout(timer2);
            scrollRight();
        }
        warp.onmouseenter=function(){
            clearInterval(timer1);
            clearTimeout(timer2);
        }
        warp.onmouseleave=function(){
            clearInterval(timer1);
            clearTimeout(timer2);
            console.log(flage);
            if (flage) {scrollLeft();}
               else{scrollRight();}    
        }
    </script>
</body>
</html>