<!DOCTYPE html><!--声明文档的类型 网页类型-->
<html>
<head>
<meta charset="utf-8"><!--国际编码 字符的编码格式-->
<!--网页三要素 title keywords description-->
<title>亚索皮肤</title><!--网页的标题-->
<meta name="keywords" content="亚索"><!--让搜索引擎找到我们的网页-->
<meta name="description" content="亚索皮肤只要9.88"><!--网页的介绍-->
<style type="text/css">
*{/*通配符= 选中所有的标签 */
margin: 0;
padding: 0;
}
img{
/*display: block;*/
vertical-align: middle;
width: 100%;
}
ul,li{
list-style-type: none;
}
.nav{
height: 110px;
background: #141c29 url("images/logo.jpg") no-repeat 10px 5px;
}
.wrap{
position: relative;
width: 980px;
height: 500px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
.bg{
position: relative;
left: 0;
width: 10000px;
height: 500px;
transition: 0.5s;
}
.icon{
width: 60px;
height: 60px;
cursor: pointer;
opacity: 0.5;
}
.bicon{
width: 52px;
height: 52px;
border: 4px solid #00A483;
}
.icon:hover{
opacity: 1;
}
.bg-skin,.icon,.bicon{
float: left;
}
.icon-skin{
position: absolute;
bottom: 10px;
right: 10px;
}
.skin-name{
position: absolute;
bottom: 80px;
right: 10px;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body><!--用户能够看到的区域-->
<div class="nav"></div>
<div class="wrap">
<ul class="bg">
<li class="bg-skin"><img src="images/1.jpg" alt="" /></li>
<li class="bg-skin"><img src="images/2.jpg" alt="" /></li>
<li class="bg-skin"><img src="images/3.jpg" alt="" /></li>
<li class="bg-skin"><img src="images/4.jpg" alt="" /></li>
<li class="bg-skin"><img src="images/5.jpg" alt="" /></li>
</ul>
<span class="skin-name">默认皮肤</span>
<ul class="icon-skin">
<li class="icon"><img src="images/11.jpg" alt="" /></li>
<li class="icon"><img src="images/22.jpg" alt="" /></li>
<li class="icon"><img src="images/33.jpg" alt="" /></li>
<li class="icon"><img src="images/44.jpg" alt="" /></li>
<li class="icon"><img src="images/55.jpg" alt="" /></li>
</ul>
</div>
<!--结构-->
<script type="text/javascript">
var icon = document.getElementsByClassName("icon");
var bg = document.getElementsByClassName("bg");
var skinName = document.getElementsByClassName("skin-name");
var num = 0;
var arr = ["默认皮肤","西部牛仔 亚索","原计划 风:亚索","猩红之月 亚索","黑夜使者 亚索"];
for (var i = 0; i < icon.length; i++) {
icon[i].index = i;
icon[i].onclick = function(){
icon[num].className = "icon";
num = this.index;
bg[0].style.left = -[this.index]*980 + "px";
skinName[0].innerHTML = arr[this.index];
this.className += " bicon";
}
}
</script>
</body>
</html>