js水平无缝滚动代码实例详解
本章节分享一段代码实例,它实现了图片无缝水平滚动效果。
这样的功能在实际应用中比较常见,感兴趣的朋友可以做一下参考。
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> * {margin: 0;padding: 0; } #box {position: relative;width: 800px;margin: 100px auto; } #div1 {width: 800px;height: 120px;position: relative;overflow: hidden; } ul {position: absolute;left: 0;top: 0; } li {float: left;list-style: none;width: 160px;height: 120px; } a {text-decoration: none;position: absolute;z-index: 10; } .left {left: -15px;top: 11px; } .right {right: -15px;top: 11px; } </style> <script type="text/javascript"> window.onload = function () {var oDiv = document.getElementById("div1");var oUl = oDiv.getElementsByTagName("ul")[0];var aLi = oUl.getElementsByTagName("li");var button = document.getElementsByTagName("a");var speed=3;oUl.innerHTML += oUl.innerHTML;oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";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"}var timer = setInterval(move, 30)oDiv.onmousemove = function () {clearInterval(timer)}oDiv.onmouseout = function () {timer = setInterval(move, 30)}button[0].onclick = function () {speed = -3}button[1].onclick = function () {speed = 3} } </script> </head> <body> <div id="box"><div id="div1"><ul><li><img src="demo/js/img/one.jpg"></li><li><img src="demo/js/img/two.jpg"></li><li><img src="demo/js/img/three.jpg"></li><li><img src="demo/js/img/four.jpg"></li><li><img src="demo/js/img/five.jpg"></li></ul></div><a href="javascript:;" class="left"><img src="demo/js/img/leftbt.jpg"></a><a href="javascript:;" class="right"><img src="demo/js/img/rightbt.jpg"></a> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function () {},文档内容完全加载完毕再去执行函数汇总的代码。
(2).var oDiv = document.getElementById("div1"),获取id属性值为div1的元素对象。
(3).var oUl = oDiv.getElementsByTagName("ul")[0],获取一个ul元素。
(4).var aLi = oUl.getElementsByTagName("li"),获取oUI元素下所有的li元素集合。
(5).var button = document.getElementsByTagName("a"),获取链接a元素集合。
(6).var speed,声明一个变量,用来设置运动的速度,下面会有介绍。
(7).oUl.innerHTML += oUl.innerHTML,再追加一份原来oul元素下的html内容。
(8).oUl.style.width = aLi[0].offsetWidth * aLi.length + "px",设置oul元素的宽度为所有li的数目乘以li元素宽度。
(9).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"
},定时器函数每隔指定的时间调用一次move函数也就实现了无缝滚动效果。
如果oul元素小于-oUl.offsetWidth / 2,也就是oul元素向左滚动完毕一个完整图片队列(因为html内容进行了拷贝追加,那么就变成了两个图片队列),那么就将oul的left属性值重置为0。
(10).if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px"
},这个是判断向右滚动是否完成一个图片队列或者处于起始位置。
如果满足上面的条件,那么就将oul的left值设置为-oUl.offsetWidth / 2 + "px"。
(11).oUl.style.left = oUl.offsetLeft + speed + "px",实现滚动效果。
js水平无缝滚动代码实例详解相关推荐
- java学习 类变量 类方法_这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(...
这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 类变量(static) 类变量是该类的所有对象共 ...
- js确认框confirm()用法实例详解
这篇文章主要针对js确认框confirm()用法进行实例讲解,介绍了javascript确认框的三种使用方法,感兴趣的小伙伴们可以参考一下 先为大家介绍javascript确认框的三种使用方法,具体内 ...
- html不间断滚动图片,图片不间断滚动代码(详解)
先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollT ...
- C#关机代码实例详解
C#关机代码是如何执行的呢?那么这段代码主要使用的是P/Invoke技术,如果对这个技术还未有接触,请花一些时间学习一下.P/Invoke不是一个能在一篇帖子里能讲明白的东西. C#关机代码这段代码实 ...
- java迭代例子_Java 迭代器的代码实例详解
一.摘要 迭代器模式是与集合共生共死的.一般来说,我们只要实现一个容器,就需要同时提供这个容器的迭代器.使用迭代器的好处是:封装容器的内部实现细节,对于不同的集合,可以提供统一的遍历方式,简化客户端的 ...
- 滚动代码Marquee详解(html滚动显示文字)
Marquee 在装修中主要制作滚动效果 先说一下Marquee的参数,温习一下 Marquee 标签常用的属性: align 设定<marquee>标签内容的对齐方式 absbott ...
- Swift 中的 async/await ——代码实例详解
前言 async-await 是在 WWDC 2021 期间的 Swift 5.5 中的结构化并发变化的一部分.Swift 中的并发性意味着允许多段代码同时运行.这是一个非常简化的描述,但它应该让你知 ...
- js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
- java 实现违章_基于JAVA的违章查询助手数据调用代码实例详解
[Java]代码 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; ...
最新文章
- 事务隔离机制原理深入分析以及MySQL不同隔离级别分场景下实验对比
- Matlab实用程序--图形应用-条形图形
- jsonutil java_Java实现的JSONUtil工具类与用法示例
- spring事务管理-注解配置aop事务(重点)
- Nignx出现failed (3: The system cannot find the path specified)问题
- 取出重复记录的第一条
- mysql 长事务查询_MySQL长事务详解
- 网友评荣耀V30:同价位无对手 除了双模5G和价格还有哪些原因
- mybatis入门教程(F)
- sqlite 可视化_知乎人均985?Python爬50W数据,BI做出可视化后,我有了答案
- UVALive 6181
- python3d旋转相册,用HTML+CSS代码制作3D旋转相册
- 计算机验证菜单命令的各种特性,2017年CAD工程师认证单选题「附答案」
- excel 柱状图 多个水滴图组合
- 秋招面经合集:阿里、华为、美团、携程、去哪儿、小米、京东都有
- 自己总结的linux命令
- 在Linux上安装VLC播放器
- CsvHelper文档-1前言
- maven的settings.xml文件
- 国标28181-2022 变更说明
热门文章
- 解决分布式事务中强一致性和最终一致性的思想
- 逻辑思维类面试题汇编四
- 基于MATLAB实现WSN(无线传感器网络)的LEACH(低能耗自适应集群层次结构)(Matlab代码实现)
- 此 Google 帐号尚未与设备关联。要安装应用,请先访问设备上的 Play 商店应用。 了解详情(已解决)
- 史蒂夫 乔布斯(Steve Jobs)在斯坦福大学2005年毕业典礼上的演讲(中英)
- python动物重量排序_动物分类的Sklearn模型
- 3d地图智慧城市电子三维地图应用
- Java架构师技能点面试题汇总SSM简历模板1.0
- AI智能技术监控学生上课行为,智慧管理加强校园教学质量
- 计算机一级考试ppt制作教程,大学计算机一级考试考PPT制作吗?