<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery换一批(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
.list1 {
display:flex;
margin:0 auto;
}
.list1 li {
flex:1;
border-radius:0.25em;
height:2.5em;
text-align:center;
line-height:2.5em;
margin:0.625em 0.32em;
}
.listchange2,.listchange3,.listchange4 {
display:none;
}
.huan {
text-align:center;
font-family:"微软雅黑";
font-size:1em;
color:#999999;
}
</style>
</head>
<body>
<ul class="list1 listchange1">
<li>幸福家庭</li>
<li>幸福家庭</li>
<li>幸福家庭</li>
<li>幸福家庭</li>
</ul>
<ul class="list1 listchange1">
<li>亲子娱乐</li>
<li>爸妈游</li>
<li>蜜月旅行</li>
<li>朋友聚会</li>
</ul>
<ul class="list1 listchange2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="list1 listchange2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="list1 listchange3">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<ul class="list1 listchange3">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<ul class="list1 listchange4">
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
</ul>
<ul class="list1 listchange4">
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
</ul>
<div style="text-align: center;"><button class="huan">换一批</button> </div>
<script>
var bcjson = ["#ff9900", "#3dbeb6", "#a3eee9", "#f8cd8c"];
var cjson = ["#fff", "black"];
$(function() {
$(".list1").children("li").each(function() {
$(this).css({
"background-color": bcjson[Math.floor(Math.random() * 4)],
"color": cjson[Math.floor(Math.random() * 2)]
});
})
})
//代表第一次换的是第二组
var listitem = 2;
//这是要换的批数
var listitemmax = 4;
$(".huan").click(function() {
$(".listchange" + listitem).siblings("ul").css("display", "none");
$(".listchange" + listitem).css("display", "flex");
if (listitem < listitemmax) {
listitem++;
} else {
listitem = 1;
}
});
</script>
</body>
</html>
