js左右滑動選項卡效果程式碼例項

admin發表於2017-04-12
JS

本章節分享一段簡單的程式碼例項，它利用javascript實現了簡單的選項卡功能。

更多選項卡效果可以查閱特效下載版塊選項卡分類。

點選能夠實現圖片的切換效果，並且切換具有滑動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
 * {
  padding:0px;
}
button {
  width:95px;
}
active {
  background-color:yellow;
}
#wrap {
  width:510px;
  overflow:hidden;
  margin:0 auto;
}
#inner{
  width: 9999px;
  overflow:hidden;
  position:relative;
  left:0;
  transition:left 0.6s;
}
#inner a {
  float: left;
}
#inner img {
  display: block;
  width: 510px;
}
#main {
  text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function () { 
  var btnList = document.getElementsByTagName("button");
  var inner = document.getElementById("inner");
  var perWidth = inner.children[0].offsetWidth;
  
  for (var index = 0; index < btnList.length; index++) {
    btnList[index].index = index;
    btnList[index].onclick = function () {
      inner.style.left = -perWidth * this.index + "px";
      for(var j = 0; j < btnList.length; j++) {
        btnList[j].className = "";
      }
      this.className = "active";
    }
  }
}
</script>
</head>
<body>
<div id="wrap">
  <div id="inner">
    <a href="###"><img src="demo/jQuery/img/2.jpg"></a>
    <a href="###"><img src="demo/jQuery/img/2.jpg"></a>
    <a href="###"><img src="demo/jQuery/img/5.jpg"></a>
    <a href="###"><img src="demo/jQuery/img/4.jpg"></a>
    <a href="###"><img src="demo/jQuery/img/5.jpg"></a>
  </div>
</div>
<div id="main">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var btnList = document.getElementsByTagName("button")，獲取button按鈕元素集合。

（3）.var inner = document.getElementById("inner")，獲取元素物件。

（4）.var perWidth = inner.children[0].offsetWidth，獲取inner元素下第一個子元素的寬度，也就是第一個連結的寬度。

（5）.for (var index = 0; index < btnList.length; index++) {}，通過for迴圈遍歷每一個button元素。

（6）.btnList[index].index = index，為按鈕新增一個自定義index屬性，並將屬性值設定為當前按鈕的索引。

（7）. btnList[index].onclick = function () {}，為當前按鈕註冊onclick事件處理函式。

（8）.inner.style.left = -perWidth * this.index + "px"，設定inner元素的left屬性值，也就是向左移動,值得大小根據索引來確定。

二.相關閱讀:

（1）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

（2）.children可以參閱javascript children一章節。

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

相關文章