JavaScript左右滑動切換的選項卡詳解

admin發表於2018-08-12
JavaScript

分享一段程式碼例項，它實現了選項卡切換效果。

通常的選項卡切換都是瞬時完成，本例是採用滑動切換的方式。

更多的選項卡效果可以查閱特效下載tab選項卡分類，這裡只是介紹實現原理。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
.total {
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
.tab {
  /*width: 100px;*/
  height: 20px;
}
.tab li {
  width: 30px;
  height: 19px;
  text-align: center;
  float: left;
  list-style: none;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: pointer;
}
.tab .act {
  background-color: yellow;
}
.cont {
  width: 200px;
  height: 100px;
  position: relative;
  border: 1px solid #ccc;
  box-sizing: border-box;
  overflow: hidden;
}
.main {
  width: 800px;
  height: 100px;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 0;
}
.main div {
  width: 200px;
  height: 100px;
  float: left;
  background-color: red;
  box-sizing: border-box;
}
</style>
<script type="text/javascript">
window.onload = function() {
  var tab = document.getElementById('tab');
  var aLi = tab.getElementsByTagName('li');
  var main = document.getElementById('main');
  var aDiv = main.getElementsByTagName('div');
  var len = aLi.length;
  main.innerHTML += main.innerHTML;
  main.style.width = aDiv[0].offsetWidth * aDiv.length + 'px';
  var index = 0;
  for (index = 0; index < len; index++) {
    aLi[index].index = index;
    aLi[index].onclick = function () {
      for (index = 0; index < len; index++) {
        aLi[index].className = "";
      }
      move((this.index) * 200, -10);
      aLi[this.index].className = 'act';
    }
  }
  var timer = null;
 
  function move(destion, speed) {
    var main = document.getElementById('main');
    clearInterval(timer);
    timer = setInterval(function() {
      if (main.offsetLeft == -destion) {
        clearInterval(timer);
      } else if (main.offsetLeft < -main.offsetWidth / 2) {
        main.style.left = 0;
      } else {
        main.style.left = main.offsetLeft + speed + 'px';
      }
    }, 16)
  }
}
</script>
</head>
<body>
  <div class="total">
    <ul id="tab" class="tab">
      <li class="act">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <div class="cont">
      <div id="main" class="main">
        <div>螞蟻部落一</div>
        <div>螞蟻部落二</div>
        <div>螞蟻部落三</div>
        <div>螞蟻部落四</div>
      </div>
    </div>
  </div>
</body>
</html>

上面的實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function() {}，文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var tab = document.getElementById('tab')，獲取選項卡的容器元素。（3）.var aLi = tab.getElementsByTagName('li')，獲取選項卡容器下面的所有li元素集合，也就是選項卡元素。

（4）.var main = document.getElementById('main')，獲取選項卡內容的容器元素。

（5）. var aDiv = main.getElementsByTagName('div')，獲取div元素集合，也就是內容元素。

（6）.var len = aLi.length，獲取選項卡的數目。

（7）.main.innerHTML += main.innerHTML，將man中的html內容複製一份，然後連線到一起，為了防止在滑動過程中出現空白現象；第二個目的也是為了後續的便於去臨界值計算。

（8）.main.style.width = aDiv[0].offsetWidth * aDiv.length + 'px',設定main元素的寬度。

（9）.var index = 0，宣告一個變數並賦初值為0。

（10）.for (index = 0; index < len; index++) ，通過for迴圈批量註冊事件處理函式。

（11）.aLi[index].index = index，為指定索引的元素新增自定義屬性index並賦初值為index。

（12）.aLi[index].onclick = function () {}，註冊click事件處理函式。

（13）.for (index = 0; index < len; index++) {

  aLi[index].className = "";

}，清空元素的class屬性值。

（13）.move((this.index) * 200, -10)，實現左右滑動效果。

（14）.aLi[this.index].className = 'act'，給當前索引的選項卡新增指定樣式類，也就是背景會變黃色。

（15）.var timer = null，宣告一個變數並賦初值為null，用作定時器函式的標識。

（16）.function move(destion, speed) ，第一個引數規定移動的尺寸，第二個參數列示移動的速度。

（17）.var main = document.getElementById('main')，獲取元素物件。

（18）.clearInterval(timer)，停止定時器函式的執行，這是為了防止連續快速點選選項卡，導致定時器函式重疊效果。

（19）.timer = setInterval(function() {},10)，每隔10毫秒執行一次回撥函式。

（20）.if (main.offsetLeft == -destion) {

  clearInterval(timer);

} ，因為傳遞的引數speed是負數，那麼就是向左滾動。

如果offsetLeft屬性值等於-destion，那麼就說明已經完成了切換動作，就停止定時器函式的執行。

（21）.else if (main.offsetLeft < -main.offsetWidth / 2) {

  main.style.left = 0;

}，如果值小於main.offsetWidth / 2，說明已經向左滾動超過一個完整的選項卡內容列表。

那麼就重置main的left屬性值為0。

（22）.else {

  main.style.left = main.offsetLeft + speed + 'px';

},滑動效果。

二.相關閱讀:

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

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

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

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

（5）.className參閱js className一章節。

（6）.clearInterval()參閱clearInterval()一章節。

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

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

相關文章