最新消息列表

<div class="container-fluid page page-news list">
    <div class="row">
        <div class="col-xs-12">
            <ul class="pagelist">
                <li><a href="/pagetf.aspx?id=t3wvq4lek8r9e">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="/pagetf.aspx?id=t3wvq4lek8r9e">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="/pagetf.aspx?id=t3wvq4lek8r9e">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="/pagetf.aspx?id=t3wvq4lek8r9e">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="/pagetf.aspx?id=t3wvq4lek8r9e">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
                <li><a href="">
                        <time>2017-05-11</time>
                        <span class="title">MME先天潛能發展研發中心</span>
                    </a></li>
            </ul>
        </div>
    </div>
</div>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="#" class="prev">prev</a>
                <ul class="list-inline">
                </ul>
                <a href="#" class="next">next</a>
            </div>
        </div>
    </div>

 // 一次顯示幾則新聞
        var pagelimt = 2

        // 頁數控制項
        var pagelistshow = 5

        // 總頁數
        var currentpage = Math.ceil($('.col-xs-12 ul li').length / pagelimt)

        // 頁數的數字
        for(i = 0 ; i < currentpage ; i++){
            $('ul.list-inline').append('<li>' + '<a style="cursor: pointer;" href=#' + (i+1) +'>' + (i+1) + '</a>' +'</li>')
        }

        // 初始顯示
        $('.col-xs-12 ul.pagelist li').hide()
        for(n = 1 ; n < (pagelimt + 1) ; n++){
            $('.col-xs-12 ul.pagelist li:nth-child(' + n + ')').show()
        }

        // 頁數列表
        $('ul.list-inline li').hide()
        for(l = 1 ; l < (pagelistshow + 1) ; l++){
            $('ul.list-inline li:nth-child(' + l + ')').show()
        }

        // 下一組頁數
        $('.next').click(function(){
            $('ul.list-inline li').hide()   

            // 頁數列表第一個自動點擊
            var showa = pagelistshow +1
            $('ul.list-inline li:nth-child(' + showa + ') a').click()

            pagelistshow = parseInt(pagelistshow) + 5
            // 當頁數切換過頭，鎖定在最後一頁
            if(pagelistshow >= currentpage){
                pagelistshow = Math.ceil((currentpage / 5))*5 
                for(l = (pagelistshow - 5)+1 ; l < ((pagelistshow)) ; l++){
                    $('ul.list-inline li:nth-child(' + l + ')').show()
                }
            }else{
                pagelistshow = pagelistshow
                for(l = (pagelistshow - 5)+1 ; l < ((pagelistshow)+1) ; l++){
                    $('ul.list-inline li:nth-child(' + l + ')').show()
                }
            }    

        })

        // 上一組頁數
        $('.prev').click(function(){  
            $('ul.list-inline li').hide()    

            pagelistshow = parseInt(pagelistshow) - 5

            // 頁數列表第一個自動點擊
            var showa = pagelistshow 
            console.log(showa)
            $('ul.list-inline li:nth-child(' + showa + ') a').click()

            // 頁數切換過頭，鎖定在第一頁
            if(pagelistshow <= 5 ){
                pagelistshow = 5
                for(l = 0 ; l < ((pagelistshow)+1) ; l++){
                    $('ul.list-inline li:nth-child(' + l + ')').show()
                }
            }else{
                for(l = (pagelistshow - 5)+1 ; l < ((pagelistshow )+1) ; l++){
                    $('ul.list-inline li:nth-child(' + l + ')').show()
                }
            }         
        })

        // 頁數被點擊後的動作
        $('ul.list-inline li a').click(function(e){
            // 點擊的上色
            $('ul.list-inline li a').css('color','#000')
            $(this).css('color','red')

            // 全部列表先隱藏起來
            $('.col-xs-12 ul.pagelist li').fadeOut(300)

            // 取得數字
            var targetnum = $(this).attr('href').split('#')[1]

            // 取得頁數範圍
            if(targetnum == 1){
                var pagestart = 1
            }else{
                var pagestart = (parseInt(targetnum) - 1) * pagelimt + 1
            }

            // 顯示內容
            setTimeout(function(){
                for( n = pagestart ; n < (pagestart + pagelimt) ; n ++ ){
                    $('.col-xs-12 ul.pagelist li:nth-child(' + n + ')').fadeIn(300)
                }
            },300)
        })