码迷,mamicode.com
首页 > Web开发 > 详细

原生JS画的tab选项卡

时间:2017-08-15 22:58:06      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:margin   ntop   this   选项卡   set   har   http   list   ack   

 记录一下原生js写的tab选项卡

鼠标滑入可以切换图片

离开之后自动切换

 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

.wrap {
height: 170px;
width: 490px;
overflow: hidden;
position: relative;
margin: 100px auto;
}

.wrap ul {
position: absolute;
/* overflow: hidden; */
}

.wrap ul li {
height: 170px;
display:none;
}

.wrap ol {
position: absolute;
right: 5px;
bottom: 10px;
}

.wrap ol li {
height: 20px;
width: 20px;
background: #ccc;
border: solid 1px #666;
margin-left: 5px;
color: #000;
float: left;
line-height: 20px;
text-align: center;
cursor: pointer;
}

.wrap ol .on {
background: #E97305;
color: #fff;
}
</style>
</head>

<body>
<div class="wrap" id=‘wrap‘>
<ul id="pic">
<li style="display:block"><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" ></li>
<li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" ></li>
<li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" ></li>
<li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" ></li>
<li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" ></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
window.onload = function () {
var warp = document.getElementById("wrap"),
pic = document.getElementById("pic")
list = document.getElementById("list").getElementsByTagName("li"),
timer = null,
index = 0;
function autoplay() {
index++;
if (index >= list.length) {
index = 0;
}
changeoption(index);
}
function changeoption( curIndex){
for (var j = 0; j < list.length; j++) {
list[j].className = ""
}
list[curIndex].className = "on";
pic.style.marginTop = -170 * (curIndex) + "px";
index = curIndex;

}
function tab() {
for (var i = 0; i < list.length; i++) {
list[i].id = i;
list[i].onmouseover = function () {
clearInterval(timer);
changeoption(this.id);
}
list[i].onmouseout = function () {
clearInterval(timer);
timer = setInterval(autoplay, 2000)
}
}
clearInterval(timer);
timer = setInterval(autoplay, 2000)
}
tab();
}
</script>
</body>

</html>

原生JS画的tab选项卡

标签:margin   ntop   this   选项卡   set   har   http   list   ack   

原文地址:http://www.cnblogs.com/linyac546922/p/7368040.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!