JQuery 漸變輪播實作（文字）

中山醫大首頁的「傑出表現」區塊，使用Cycle元件製作漸變效果。 Cycle官網：http://malsup.com/jquery/cycle/

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://www.csmu.edu.tw/ezfiles/0/1000/img/1696/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="http://message.csmu.edu.tw/CsmuBoardSchedular/CsmuBoard_Excellence.txt"></script>


<div id="excellenceBoard1">
        <div id="excellenceBoard_target">
            <!--HTML加入位置-->
        </div>
    </div>

CSS

body {
            margin-left: 0px;
            margin-top: 0px;
        }

        #excellenceBoard1 {
            background-image: url(http://message.csmu.edu.tw/CsmuBoard/img/excellenceBoard_bg2.jpg);
            width: 237px;
            height: 237px;
        }

        #excellenceBoard_target {
            position: relative;
            left: 0px;
            top: 30px;
            text-align: left; /*不知為何置中的話IE會有問題所以先置左*/
            margin-left: 10px;
            margin-right: 10px;
        }

            #excellenceBoard_target a {
                font-family: Microsoft JhengHei;
                font-size: 18px; /*字體大小*/
                line-height: 24px; /*行高*/
                color: #fff;
                text-decoration: none;
            }

JavaScript

//*region 初始化
        $(document).ready(function () {

            setText();
            // 設定輪播元件
            setCycle();
            
        });
        //*endregion



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


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

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

        //*region 設定切換文字元件 Cycle
        function setCycle() {
            $('#excellenceBoard_target').cycle({ timeout: 10000, speed: 1500 });
        };
        //*endregion