js原生实现选项卡
Posted humility
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js原生实现选项卡相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>原生js实现轮播图</title>
<meta charset="utf-8" />
<style>
html,body, div, ul, li, a {
margin:0;padding:0;
}
a{text-decoration:none;}
li{list-style:none;}
.container{
width:520px;
height:280px;
position:relative;
overflow:hidden;
margin:100px auto;
background:#ccc;
box-shadow:0 0 5px #ffd800;
}
.warp{
height:280px;
position:absolute;
left:0;
top:0;
z-index:1;
}
.warp img{
float:left;
width:520px;
height:280px;
}
.container .buttons{
position:absolute;
bottom:10px;
height:10px;
width:100%;
z-index:2;
left:40%;
}
.container .buttons span{
display:inline-block;
width:20px;
height:20px;
border-radius:50%;
background:#ff0000;
color:#fff;
text-align:center;
cursor:pointer;
}
.container .buttons span.on{
background:#808080;
}
.container .arrow{
position:absolute;
color:#fff;
padding:0px 6px;
border-radius:50%;
background:rgba(0, 0, 0,1);
font-size:20px;
z-index:2;
top:48%;
}
.container .arrow_left{
left:10px;
}
.container .arrow_right{
right:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="warp" style="left:-520px">
<!--实现无缝滚动，需要在首尾分别添加一张过渡图片-->
<img src="http://fpoimg.com/520x280?text=four" />
<img src="http://fpoimg.com/520x280?text=one" />
<img src="http://fpoimg.com/520x280?text=two" />
<img src="http://fpoimg.com/520x280?text=three" />
<img src="http://fpoimg.com/520x280?text=four" />
<img src="http://fpoimg.com/520x280?text=one" />
</div>
<div class="buttons">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<a href="#" class="arrow arrow_left"><</a>
<a href="#" class="arrow arrow_right">></a>
</div>
<script>
var container = document.querySelector(".container");
var warp = document.querySelector(".warp");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
var dots = document.getElementsByTagName("span");
var index = 0;
var timer = null;
function next_pic() {
var newLeft;
index++;
if (index > 3) {
index = 0;
}
showCurrentDot();
if (warp.style.left === "-2600px") {/*520*5=2600*/
newLeft = -1040; /*520*2=1040*/
} else {
newLeft = parseInt(warp.style.left) - 520;
}
warp.style.left = newLeft + "px";
}
function autoPlay(){
timer = setInterval(function() {
next_pic();
}, 2000);
}
autoPlay();
function prev_pic() {
index--;
if (index < 0) {
index = 3;
}
showCurrentDot();
if (warp.style.left === "0px") {
newLeft = -1560;/*520*3=1560*/
} else {
newLeft = parseInt(warp.style.left) + 520;
}
warp.style.left = newLeft + "px";
}
next.onclick = function () {
next_pic();
}
prev.onclick = function () {
prev_pic();
}
container.onmouseenter = function () {
clearInterval(timer);
}
container.onmouseleave = function () {
autoPlay();
}
function showCurrentDot() {
for (var i = 0, len = dots.length;i<len;i++){
dots[i].className="";
}
dots[index].className = "on";
}
for (var i = 0, len = dots.length; i < len; i++) {
//自执行匿名函数,常见格式：(function() { /* code */ })();
(function (i) {
dots[i].onclick = function () {
var dis = index - i;
if (index == 3 && parseInt(warp.style.left!==-2080)) {/*520*4=2080*/
dis = dis - 4;
}
if (index == 0 && parseInt(warp.style.left !== -520)) {
dis = 4 + dis;
}
warp.style.left = (parseInt(warp.style.left) + dis * 520) + "px";
index = i;
showCurrentDot();
}
})(i);
}
</script>
</body>
</html>
以上是关于js原生实现选项卡的主要内容，如果未能解决你的问题，请参考以下文章