基于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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
javascript中Number的方法小结
Nov 21 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
基于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
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
试用php中oci8扩展
2015/06/18 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
js 单引号 传递方法
2009/06/22 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python学习之time模块的基本使用
2021/01/17 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
党校自我鉴定范文
2013/10/02 职场文书
工程力学专业毕业生求职信
2013/10/06 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2015年高中语文教学总结
2015/08/18 职场文书