圓點根據內容增多而添加,每四行爲一個圓點的內容
效果圖:
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
li {
list-style: none;
}
.week-box {
position: relative;
float: left;
padding: 0 10px;
width: 67%;
height: 100%;
color: #666;
}
.week-box .circle-box {
position: absolute;
right: 0;
top: 5px;
}
.week-box ul {
display: none;
}
.week-box .circle-box li {
float: left;
margin-left: 6px;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 10px;
cursor: pointer;
}
.week-box .circle-box li.active {
background: #299eed;
}
</style>
</head>
<body>
<div class="week-box">
<p>本週需完成迭代<span class="circle-box"></span></p>
<ul style="display: block;">
<li><span>1811</span>某某某某項目</li>
<li><span>1812</span>某某某某項目</li>
<li><span>1813</span>某某某某項目</li>
<li><span>1814</span>某某某某項目</li>
<li><span>1815</span>某某某某項目</li>
<li><span>1816</span>某某某某項目</li>
<li><span>1817</span>某某某某項目</li>
<li><span>1818</span>某某某某項目</li>
<li><span>1819</span>某某某某項目</li>
<li><span>1819</span>某某某某項目</li>
</ul>
</div>
<script src="../../Scripts/jquery-1.10.1.min.js "></script>
<script>
$(function () {
var $weekBox = $('.week-box');
var $li = $('.week-box li');
var i = $li.length;
if(i>4) {
// 圓點個數
var circle = Math.ceil(i/4);
// 每個ul內的內容
for(var m=1; m<circle; m++) {
$weekBox.append('<ul></ul>');
$.each($li, function (i) {
$li.eq(i+4*m).appendTo($('.week-box ul')[m]);
});
}
// 切換圓點時切換ul內容
for(var j=0; j<circle; j++){
$('.week-box .circle-box').append('<li></li>');
$('.week-box .circle-box li:first-child').addClass('active');
$('.circle-box li').click(function() {
var n = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.week-box ul').eq(n).show().siblings('ul').hide();
});
}
}
});
</script>
</body>
</html>