js实现无缝滚动图


Posted in Javascript onFebruary 22, 2017

效果如下:

js实现无缝滚动图

代码如下:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <style type = "text/css">
   ul, li { padding: 0; margin: 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;
   }
   .box #right {
   background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat;
   right: 0;
   }
   #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 timer = null;//管理定时器
   var leader = 0;
    //1秒之后再开启定时器
    timer = setTimeout(function(){
     timer = setInterval(autoAd,30);
    },1000);
   //开启定时器
   function autoAd(){   
   leader -=5;
   leader<=-3200?leader = 0:leader;
   ad.style.left = leader +"px";
   }
   //鼠标划入 关闭定时器
   ad.onmouseover = function() {   
   clearInterval(timer);
   }
   //鼠标离开 开启定时器
   ad.onmouseout = function(){
   timer = setInterval(autoAd,20);
   }
   }
  </script>
 </head>
 <body>
  <div class="box">  
  <ul id="ad">
  <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt=""></li>
  <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152pfbkbfe8vbtvulfu.jpg" alt=""></li>
  <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153u3jgn0ds43ndd3dz.jpg" alt=""></li>
  <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152juuohne22z60hbsb.jpg" alt=""></li>
  <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt=""></li>
  </ul>
  <span id="left"></span>
  <span id="right"></span>
  </div>
 </body>
</html>

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

Javascript 相关文章推荐
JS 事件绑定函数代码
Apr 28 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 #Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 #Javascript
原生JS实现幻灯片
Feb 22 #Javascript
微信小程序 解析网页内容详解及实例
Feb 22 #Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 #Javascript
js中document.referrer实现移动端返回上一页
Feb 22 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php开启openssl的方法
2014/05/15 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Pytorch之保存读取模型实例
2019/12/30 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2014年底个人工作总结
2015/03/10 职场文书
自我推荐信怎么写
2015/03/24 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang