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


Posted in Javascript onFebruary 22, 2017

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

效果图:

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

代码如下:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <style type = "text/css">
 *{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;
  }
 </style>
 <script type = "text/javascript">
  window.onload = function(){
  var ad = document.getElementById("ad");
  var lef = document.getElementById("left");
  var rig = document.getElementById("right");
  var timer = null; //管理定时器
 var aspect = true;
  function animate(obj,speed){
   //关闭上一个定时器
   clearInterval(obj.timer);
   //管理定时器
 obj.timer = setInterval(autoAd,30);
   function autoAd(){
   //判断左走或者右走
   if(speed > 0){
    aspect = true;
    if(obj.offsetLeft >= 0){
    obj.style.left = -3200 + 'px';
    }
 }else {
    aspect = false;
    if(obj.offsetLeft <= -3200){
    obj.style.left = 0;
    }
 }
   //匀速动画: 盒子当前的位置 + 步长
   obj.style.left = obj.offsetLeft + speed +"px";
   }
 }
 animate(ad,-5);
 //鼠标划入显示控制按钮并关闭
  ad.parentNode.onmouseover = function(){
   clearInterval(ad.timer);
 lef.style.display = "block";
   rig.style.display = "block";
 };
  //鼠标离开隐藏控制按钮并启动定时器
  ad.parentNode.onmouseout = function(){
   clearInterval(ad.timer);
   clearInterval(timer);
   lef.style.display = "none";
   rig.style.display = "none";
 if(aspect){
 animate(ad,5);
 }else{
 animate(ad,-5);
 }
  };
  ad.onclick = function(event){
   //关闭自动轮播定时器
   clearInterval(ad.timer);
   clearInterval(timer);
   var event = event || window.event;
 if(event.target){
   var target = - parseInt(event.target.alt) * 800;
 }else{
   var target = - parseInt(event.srcElement.alt) * 800;
 }
   timer = setInterval(function(){
   var step = (target - ad.offsetLeft) / 10;
   step = step > 0 ? Math.ceil(step):Math.floor(step);
   ad.style.left = ad.offsetLeft + step + "px";
   if(ad.offsetLeft%800 == 0){
    clearInterval(timer);
 }
 },20)
 }
  //右移动
  lef.onclick = function(){
   clearInterval(timer);
   animate(ad,5);
  };
  //左移动
  rig.onclick = function(){
   clearInterval(timer);
 animate(ad,-5);
 };
  }
 </script>
 </head>
 <body>
 <div class="box"> 
 <ul id="ad">
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt="0"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152pfbkbfe8vbtvulfu.jpg" alt="1"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153u3jgn0ds43ndd3dz.jpg" alt="2"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152juuohne22z60hbsb.jpg" alt="3"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt="4"></li>
 </ul>
 <span id="left"></span>
 <span id="right"></span>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
js实现无缝滚动图
Feb 22 #Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 #Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 #Javascript
原生JS实现幻灯片
Feb 22 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
深入分析PHP设计模式
2020/06/15 PHP
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
Vue实现图片与文字混输效果
2019/12/04 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
python+pyqt实现12306图片验证效果
2017/10/25 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
基于Python绘制个人足迹地图
2020/06/01 Python
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
在C#中如何实现多态
2014/07/02 面试题
linux下进程间通信的方式
2013/01/23 面试题
2014年自我评价
2014/01/04 职场文书
软件项目开发计划书
2014/05/01 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
校园新闻稿范文
2015/07/18 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL