jquery - 切換點根據內容數量而添加

圓點根據內容增多而添加,每四行爲一個圓點的內容

效果圖:

<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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章