图片水平滚动

最新推荐文章于 2021-08-07 00:35:05 发布

chongtingge6113

最新推荐文章于 2021-08-07 00:35:05 发布

阅读量104

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/middenEurope/blog/819511

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #outer{
            width: 600px;
            height: 500px;
            border:1px black solid;
            overflow: hidden;
            margin: 40px auto;
        }
        #inner{
            width: 2400px;
            height: 100%;
        }
        #inner img{
            width: 600px;
            height: 100%;
            float:left;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <img src="image/002.jpg"/>
            <img src="image/003.jpg"/>
            <img src="image/001.jpg"/>
            <img src="image/004.jpg"/>
        </div>
    </div>
    <script type="text/javascript">
    var outer=document.getElementById("outer");
    var inner=document.getElementById("inner");
    var images=document.getElementsByTagName("img");
    var timer1,timer2,speed=17;
    window.onload=function(){
        timer1=setInterval(move, speed);
    }

    function move(){
        outer.scrollLeft+=10;
        if(isFullImage()){
            pause();
        }
    }
    function isFullImage(){
        var flag=false;
        if(outer.scrollLeft%images[0].offsetWidth==0){
            flag=true;
        }
        return flag;
    }
    function pause(){
        clearInterval(timer1);
        clearTimeout(timer2);
        timer2=setTimeout(function(){
            //时间选择器再一次一次性启动第一个线程
           timer1=setInterval(move, speed);
        },1000);
    }
    </script>
</body>
</html>

计时器主要分为

一次性计时器