<!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>
JavaScript+HTML+CSS实现图片轮播
需积分: 5 185 浏览量
2018-06-06
23:43:55
上传
评论 2
收藏 971KB ZIP 举报
lunbo.zip （12个子文件） 
lunbo images 
2.jpg 76KB 1.jpg 119KB 3.jpg 305KB 5.jpg 366KB 55.jpg 6KB 11.jpg 3KB 4.jpg 71KB 22.jpg 3KB logo.jpg 13KB 33.jpg 7KB 44.jpg 3KB
lunbo.html 3KB资源评论
