js左右滑动选项卡效果代码实例

日期: 2022-12-08 13:45:48 分类: 前端浏览量：留言数： 98617

本章节分享一段简单的代码实例，它利用javascript实现了简单的选项卡功能。

更多选项卡效果可以查阅特效下载版块选项卡分类。

点击能够实现图片的切换效果，并且切换具有滑动效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。