js水平无缝滚动代码实例详解

最新推荐文章于 2023-11-10 12:46:32 发布

Return_KB

最新推荐文章于 2023-11-10 12:46:32 发布

阅读量4.9k

点赞数 1

分类专栏：前端js

前端js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本章节分享一段代码实例，它实现了图片无缝水平滚动效果。

这样的功能在实际应用中比较常见，感兴趣的朋友可以做一下参考。

代码如下:

<!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"，实现滚动效果。

Return_KB

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js水平无缝滚动代码实例详解

本章节分享一段代码实例，它实现了图片无缝水平滚动效果。这样的功能在实际应用中比较常见，感兴趣的朋友可以做一下参考。代码如下:&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="author" content="http://www.softwhy.com/&
复制链接

扫一扫