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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
详解vue axios二次封装
Jul 22 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
简单谈谈json跨域
2016/03/13 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python3 读取Word文件方式
2020/02/13 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
python 生成器需注意的小问题
2020/09/29 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
性能服装:HYLETE
2018/08/14 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
先进事迹演讲稿
2014/09/01 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB