js水平无缝滚动代码实例详解
2018-01-17 15:17
609 查看
本章节分享一段代码实例,它实现了图片无缝水平滚动效果。这样的功能在实际应用中比较常见,感兴趣的朋友可以做一下参考。代码如下:<!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",实现滚动效果。
<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>
相关文章推荐
- 基于JS实现新闻列表无缝向上滚动实例代码
- 基于JS实现新闻列表无缝向上滚动实例代码
- JS无缝代码滚动
- JS让图片无缝滚动的实现(JS代码讲解,非直拷型内容)
- js图片无缝滚动代码
- 常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全
- js无缝滚动原理及详解
- 图片无缝滚动代码(向左/向下/向上)的js代码
- js上下无缝滚动代码
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- JS图片滚动代码(无缝、平滑)
- 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。
- js图片无缝滚动代码
- js实现单行文本向上滚动效果实例代码
- JS实现的N多简单无缝滚动代码(包含图文效果)
- 常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全
- 关于动态执行代码(js的Eval)实例详解
- JS图片滚动代码(无缝、平滑)
- JS图片根据鼠标滚动延时加载的实例代码
- js图片无缝滚动代码