js实现无缝滚动图（可控制当前滚动的方向）

这个版本可以控制左右滚动，鼠标点击对应的广告会自动滑动把广告完全展示出来。还实现了记录当前滚动的方向，当鼠标离开，接着继续滚动！！！

效果图：

代码如下：

 
 
 
 *{margin: 0; padding: 0;}
  li { list-style: none; }
  .box {
  width: 800px;
  height: 450px;
  margin: 50px auto;
  overflow: hidden; 
  position: relative;
  }
  .box span {
  width: 40px;
  height: 60px;  
  display: block;
  position: absolute;
  top: 225px;
  margin-top: -20px;
  cursor: pointer;
  z-index: 1;
  }
  .box #left {
 background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png') no-repeat;
 left: 0;
    display: none;
  }
  .box #right {
  background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat;
  right: 0;
   display: none;
  }
  #ad {
  width: 4000px;
  height: 450px;
  position: absolute;
  }
  #ad li {
 float: left;
  }
 
 
 
 
  
 

 

 

 

 

 

 
 
 
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！