JavaScript插件制作练习-鼠标划过选项卡切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #353131;
}
.warp {
position: relative;
top: 50px;
left: 25%;
}
ul {
list-style: none;
}
ul .warp-li {
float: left;
100px;
height: 40px;
line-height: 40px;
background: #000;
opacity: .3;
color: #fff;
text-align: center;
}
ul .warp-li:hover {
background: aquamarine;
color: #000000;
opopacity: 1;
}
ul::after {
display: block;
content: "";
clear: both;
}
.box {
position: absolute;
left: 0;
top: 40px;
display: none;
}
.box img {
500px;
height: 300px;
}
#show {
display: block;
}
#on {
background: aquamarine;
color: #000;
opopacity: 1;
}
</style>
</head>
<body>
<div class="warp">
<ul>
<li class="warp-li" id="on">首页</li>
<li class="warp-li">动漫</li>
<li class="warp-li">游戏</li>
<li class="warp-li">生活</li>
<li class="warp-li">直播</li>
</ul>
<div class="box" id="show">
<img src="img/1.jpg" />
</div>
<div class="box">
<img src="img/18d8bc3eb13533fa3110518aadd3fd1f40345bf4.jpg" />
</div>
<div class="box">
<img src="img/359b033b5bb5c9eab33999fed739b6003bf3b3e1.jpg" />
</div>
<div class="box">
<img src="img/ce4a8e8065380cd7fd58a3eaa944ad3459828123.jpg.png" />
</div>
<div class="box">
<img src="img/timg.jpg" />
</div>
</div>
<script type="text/javascript">
(function(window) {
var maxTab = function(tabLen, showLen, tabLenId, showLenId) {
this.tabLen = tabLen;
this.showLen = showLen;
this.tabLenId = tabLenId; //选项卡id
this.showLenId = showLenId; //显示区域id
this.show();//调用切换图片的方法
}
maxTab.prototype = {
constructor: maxTab,
show: function() {
var _this = this; //这里的this是指向maxTab的，function会建里一个作用域所以要保留
var tabLen = document.getElementsByClassName(this.tabLen);
var showLen = document.getElementsByClassName(this.showLen);
var index = 0;
for(var i = 0; i < tabLen.length; i++) {
tabLen[i].setAttribute("index", i);
for(var j = 0; j < tabLen.length; j++) {
tabLen[i].onmouseover= function() {
_this.reset(tabLen);
_this.reset(showLen);
this.id = _this.tabLenId;
index = this.getAttribute("index");
showLen[index].id = _this.showLenId;
}
}
}
},
//格式化id
reset: function(obj) {
for(var i = 0; i < obj.length; i++) {
obj[i].removeAttribute("id");
}
}
}
window.maxTab = maxTab;
})(window)
//插件调用
var am = new maxTab("warp-li", "box", "on", "show");
</script>
</body>
</html>