定时器简单案例-1

长图左右滚动：

　示例代码：

1.HTML代码：

<!DOCTYPE hml>
<html>
<head>
   <meta charset="utf-8">
   <title>长图滚动</title>
　<link el="stylesheet" href="./style.css">
</head>
<body>
   <div id="box">
            <img src="./images/long_pic2.jpg" id="pic">
            <span id="to-left"></span>
            <span id="to_right"></span>
    </div>
    <script src="./index.js"></script>
</body>
</html>

2.css：样式表文件

            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            body{
                background: url("./images/move.gif") no-repeat;
                background-size: cover;
            }
            #box{
                width: 800px;
                height: 400px;
                margin: 100px auto;
                border: 2px solid pink;
                box-shadow: 0 0 10px red;
                overflow: hidden;
                position: relative;

            }
            #pic{
                height: 400px;
                position: absolute;
                left: 0;
                top: 0;
            }
            #to-left,#to_right{
                width: 50%;
                height: 100%;
                cursor: pointer;
                position: absolute;
                top: 0;
            }
            #to-left{
                left: 0;
                /*background-color: red;*/
            }
            #to_right{
                right: 0;
                /*background-color: green;*/
            }

3.js文件：

            window.onload=function(){
                var timer=null;
                var num=0;
               //监听鼠标移入事件
               //1.图片向左移动
               $("to-left").onmouseover=function(){
                   //清除定时器
                   clearInterval(timer);
                   //开启定时器
                   timer=setInterval(function(){
                       //设置移动步长
                       num-=5;
                       //判断，图片可视宽度=图片真实宽度-box宽度
                       if(num>=-1710){
                           $("pic").style.left=num+"px";
                       }else{
                           clearInterval(timer);
                       }
                   },30);
               }
               //2.图片右移
               $("to_right").onmouseover=function(){
                   //清除定时器
                   clearInterval(timer);
                   //开启定时器
                   timer=setInterval(function(){
                       //设置步长
                       num+=5;
                       //判断
                       if(num<5){
                           $("pic").style.left=num+"px";
                       }else{
                           clearInterval(timer);
                       }
                   },30);
               }
               //监听盒子鼠标移出事件
               $("box").onmouseout=function(){
                   //清除定时器
                   clearInterval(timer);
               }
            }
            function $(id){
                return typeof id==="string"?document.getElementById(id):null;
            }

3.效果展示：

定时器简单案例-1

猜你喜欢