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

吐槽君 分类:实例代码

本章节分享一段简单的代码实例,它利用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()一章节。

(2).children可以参阅javascript children一章节。

(3).offsetWidth可以参阅js offsetWidth一章节。

js左右滑动选项卡效果代码实例,这样的场景在实际项目中还是用的比较多的,关于js左右滑动选项卡效果代码实例就介绍到这了。

js左右滑动选项卡效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容