JavaScript水平無縫滾動程式碼

admin發表於2018-07-10
JavaScript

本章節分享一段程式碼例項，它實現了圖片無縫水平滾動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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"，實現滾動效果。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.innerHTML參閱innerHTML一章節。

（3）.offsetWidth參閱js offsetWidth一章節。

（4）.setInterval()參閱setInterval()一章節。

（5）.offsetLeft參閱offsetleft一章節。

（6）.onmouseout參閱javascript mouseout 事件一章節。

相關文章