简单实现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 相关文章推荐
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
详解vue v-model
Aug 31 Javascript
Vue js with语句原理及用法解析
Sep 03 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
人大复印资料处理程序_查询篇
2006/10/09 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python按照多个条件排序的方法
2019/02/08 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
护士思想汇报
2014/01/12 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python