<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.l {
float: left;
}
.r {
float: right;
}
.c:after {
clear: both;
0;
height: 0;
content: "";
display: block;
visibility: hidden;
}
.active {
display: block!important;
}
.head {
700px;
}
.top {
padding: 10px 0px;
}
.bottom {
700px;
background: orange;
}
.bottom div {
display: none;
}
.bottom div ul {
float: left;
33%;
}
.bottom div ul li {
text-align: center;
}
.bottom div ul li img {
200px;
}
</style>
<script>
window.onload = function () {
var change = document.querySelector(".top a"),
bottom = document.querySelector(".bottom"),
div = document.querySelectorAll(".bottom div"),
index = 0;
change.onclick = function () {
for(var i=0,len=div.length;i<len;i++){
div[i].className="";
}
index++;
//index等于div数组的长度
if(index==len) index=0;
div[index].className="active";
}
}
</script>
</head>
<body>
<div class="head">
<div class="top">
<span>热门推荐</span>
<a href="javascript:;" class="r">换一批</a>
</div>
<div class="bottom c">
<div class="active">
<ul>
<li>
<a href="javascript:;">
<img src="./pic/1.jpg">
</a>
</li>
<li>价格</li>
<li>111111111111</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/1.jpg">
</a>
</li>
<li>价格</li>
<li>1111111111111</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/1.jpg">
</a>
</li>
<li>价格</li>
<li>111111111111111111</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/2.jpg">
</a>
</li>
<li>价格</li>
<li>22222222222222</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/2.jpg">
</a>
</li>
<li>价格</li>
<li>22222222222222</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/2.jpg">
</a>
</li>
<li>价格</li>
<li>22222222222222</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/3.jpg">
</a>
</li>
<li>价格</li>
<li>3333333333333333333</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/3.jpg">
</a>
</li>
<li>价格</li>
<li>3333333333333333333</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="./pic/3.jpg">
</a>
</li>
<li>价格</li>
<li>3333333333333333333</li>
</ul>
</div>
</div>
</div>
</body>
