JQuery 文字垂直輪播實作

中山醫大首頁的「重要公告」區塊。 參考此網頁範例修改實作：http://abgne.tw/jquery/apply-jquery/jquery-yahoo-scroll-message-marquee-plus.html

by Shang-De You

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript" src="http://message.csmu.edu.tw/CsmuBoardSchedular/CsmuBoard_Important.txt"></script>


    
    <div id="abgne_marquee">
        <img src="http://www.csmu.edu.tw/ezfiles/0/1000/gallery/5/5/gallery_5_2436554_32407.png" alt="重要公告圖示"/>
        
        <ul id="importantBoard_target">
            <!--jQuery加入內容在此-->
        </ul>
<div class="marquee_btn" id="marquee_prev_btn"><img src="http://www.csmu.edu.tw/ezfiles/0/1000/gallery/5/5/gallery_5_435372_43188.gif" alt="上一則重要公告" /></div>        
<div class="marquee_btn" id="marquee_next_btn"><img src="http://www.csmu.edu.tw/ezfiles/0/1000/gallery/5/5/gallery_5_168669_43188.gif" alt="下一則重要公告" /></div>
    </div>

CSS

div#abgne_marquee {
            position: relative;
            overflow: hidden; /* 超出範圍的部份要隱藏 */
            width: 620px;
            height: 35px;
            border: 0px solid #ccc;
        }

            div#abgne_marquee ul, div#abgne_marquee li {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            div#abgne_marquee ul {
                position: absolute;
                left: 140px; /* 往後推個 30px */
            }

                div#abgne_marquee ul li a {
                    display: block;
                    overflow: hidden; /* 超出範圍的部份要隱藏 */
                    font-size: 13px;
                    color: #000;
                    height: 35px;
                    line-height: 35px;
                    padding-left: 0px;
                    text-decoration: none;
                    background: #fff url(back.gif) no-repeat;
                }



            div#abgne_marquee div.marquee_btn {
                position: absolute;
                cursor: pointer;
            }

            div#abgne_marquee div#marquee_next_btn {
                position: absolute;
                top: 4px;
                right: 5px;
            }

            div#abgne_marquee div#marquee_prev_btn {
                position: absolute;
                top: 4px;
                right: 25px;
            }

JavaScript

//*region
        // 初始化
        $(document).ready(function () {
            
            // 放入跑馬燈文字
            setText();
            // 設定跑馬燈
            setMarquee();
        });
        //*endregion


        //*region
        // 放入跑馬燈文字
        function setText() {
            // 取得文字內容
            var content = $.parseJSON(importantBoard);

            // 組成Html
            var contentHtml = "";
            for (var item in content) {
                var url = "http://message.csmu.edu.tw/main2Page.asp?MessageID=" + content[item].messageId;
                var title = content[item].title + "[" + content[item].dept + "]";
                contentHtml += '<li><a class="jumpWindow" href="' + url + '">' + title + '</a></li>';
            }

            // 加入Html
            $('#importantBoard_target').append(contentHtml);
        }
        //*endregion

        //*region
        // 設定跑馬燈
        function setMarquee() {
            // 先取得 div#abgne_marquee ul
            // 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
            // 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
            // 設定跑馬燈移動的速度及輪播的速度
            var $marqueeUl = $('div#abgne_marquee ul'),
                $marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
                _height = $('div#abgne_marquee').height() * -1,
                scrollSpeed = 600,
                timer,
                speed = 3000 + scrollSpeed,
                direction = 0,	// 0 表示往上, 1 表示往下
                _lock = false;

            // 先把 $marqueeli 移動到第二組
            $marqueeUl.css('top', $marqueeli.length / 2 * _height);

            // 幫左邊 $marqueeli 加上 hover 事件
            // 當滑鼠移入時停止計時器；反之則啟動
            $marqueeli.hover(function () {
                clearTimeout(timer);
            }, function () {
                timer = setTimeout(showad, speed);
            });

            // 判斷要往上還是往下
            $('div#abgne_marquee .marquee_btn').click(function () {
                if (_lock) return;
               ...