简单实现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 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 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
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
package.json文件配置详解
2017/06/15 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
python读写二进制文件的方法
2015/05/09 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
运动会广播稿400字
2014/01/25 职场文书
车间机修工岗位职责
2014/02/28 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
python 管理系统实现mysql交互的示例代码
2021/12/06 Python