长图左右滚动：
示例代码：
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.效果展示：
