基于JavaScript实现无缝滚动效果


Posted in Javascript onJuly 21, 2017

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

  • 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝对定位 ,否则它根本无法滚动,而它相对于div1滚动 ,则div1就作为他的相对定位。
  • oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心,使之可以在不论左右滚动的时候都有下一步图片接上去。
  • 在操作或者进行比较的时候,都要用offset取值来进行操作或者比较!!!

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝滚动2</title>
 <style type="text/css"> 
 *{
  padding: 0;
  margin:0;
 }
 #div1{
  position: relative;
  width: 800px;
  height: 200px;
  background:red;
  margin:100px auto;
  overflow: hidden;
 }
 #div1 ul{
  position: absolute;
  left: 0;
  top: 0;

 }
 #div1 ul li{
  float: left;
  list-style: none;
  width: 200px;
  height: 200px;
 }
 </style>
 <script type="text/javascript">
 window.onload=function()
 {
  var oDiv = document.getElementById('div1');
  var oUl = oDiv.getElementsByTagName('ul')[0];
  var aLi = oDiv.getElementsByTagName('li');
  var aA = document.getElementsByTagName('a');
  var speed = 3;
  oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
  oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';

  var timer=setInterval(move,30);

  function move()
  { 
   if (oUl.offsetLeft<=-oUl.offsetWidth/2) {
    oUl.style.left="0";
    } 
    if(oUl.offsetLeft>0){
     oUl.style.left=-oUl.offsetWidth/2+'px';
    }
    oUl.style.left=oUl.offsetLeft+speed+'px';
  };
  oDiv.onmouseover=function()
  {
   clearInterval(timer);
  };
  oDiv.onmouseout=function()
  {
   timer=setInterval(move,30);
  };
  aA[0].onclick=function()
  {
   speed=-3;
  };
  aA[1].onclick=function()
  {
   speed=3;
  };
 };
 </script>
</head>
<body>
 <a href="javascript:;">向左</a>
 <a href="javascript:;">向右</a>
 <div id="div1">
  <ul>
   <li><img src="images/n1.jpg"></li>
   <li><img src="images/n2.jpg"></li>
   <li><img src="images/n3.jpg"></li>
   <li><img src="images/n4.jpg"></li>
  </ul>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
javascript常用功能汇总
Jul 05 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
vue+element实现打印页面功能
May 20 Javascript
基于JavaScript实现选项卡效果
Jul 21 #Javascript
基于JavaScript实现弹幕特效
Aug 27 #Javascript
js实现水平滚动菜单导航
Jul 21 #Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 #Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python基础知识小结之集合
2015/11/25 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
详解Python的三种可变参数
2019/05/08 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
教师节促销方案
2014/03/22 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
经济纠纷起诉状
2015/05/20 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
golang 实现并发求和
2021/05/08 Golang
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏