简单实现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与google map api结合使用 控件,监听器
Mar 04 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 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
如何选购合适的收音机
2021/03/01 无线电
PHP与MySQL交互使用详解
2006/10/09 PHP
PHP生成便于打印的网页
2006/10/09 PHP
PHP入门学习笔记之一
2010/10/12 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP中常用的魔术方法
2017/04/28 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
python保存二维数组到txt文件中的方法
2018/11/15 Python
带你认识Django
2019/01/15 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python之字典添加元素的几种方法
2020/09/30 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
"引用"与多态的关系
2013/02/01 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
银行办理业务介绍信
2014/01/18 职场文书
马智宇结婚主持词
2014/04/01 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
安全教育主题班会总结
2015/08/14 职场文书