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左右滑动选项卡效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。