简单实现js无缝滚动效果


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  ul{
   list-style: none;
  }
  img{
   vertical-align: top; /*消除3px的距离*/
  }
  .box{
   width: 600px;
   height: 200px;
   margin: 100px auto;
   overflow: hidden;
   position: relative;
   border: 1px solid red;
  }
  ul{
   width: 400%;
   position: absolute;
   left: 0;
   top: 0;
  }
  ul li{
   float: left;
  }
 </style>
 <script> 
 window.onload = function(){
  function $(id){ return document.getElementById(id); } 
  var timer = null;
  var num = 0;
  timer = setInterval(autoPlay,20);
  function autoPlay(){
   num--;
   if(num<=-1200){ 
     num = 0;
   }
   $("picBox").style.left = num + "px";   
  }
  $("picBox").onmouseover = function(){
   clearInterval(timer);
  }
  $("picBox").onmouseout = function(){
   timer = setInterval(autoPlay,20);
  }
 }
 </script>
</head>
<body>
 <div class="box" id="scroll">
  <ul id="picBox">
   <li><img src="images/01.jpg" alt=""></li>
   <li><img src="images/02.jpg" alt=""></li>
   <li><img src="images/03.jpg" alt=""></li>
   <li><img src="images/04.jpg" alt=""></li>
   <li><img src="images/01.jpg" alt=""></li>
   <li><img src="images/02.jpg" alt=""></li>
  </ul>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
JS常用知识点整理
Jan 21 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
完美的js图片轮换效果
Feb 05 #Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 #Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 #Javascript
Vue.js学习示例分享
Feb 05 #Javascript
JavaScript定时器制作弹窗小广告
Feb 05 #Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 #Javascript
flexslider.js实现移动端轮播
Feb 05 #Javascript
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
超清晰的document对象详解
2007/02/27 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
微信小程序实现侧边栏分类
2019/10/21 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python中argparse模块用法实例详解
2015/06/03 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
实时获取Python的print输出流方法
2019/01/07 Python
python实现接口并发测试脚本
2019/06/25 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
专科毕业生就业推荐信
2013/11/01 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS