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_Video.txt"></script>


    <div id="videoBoard">
        <div id="videoBoard_target">
            <!--HTML加入位置-->
        </div>
        <div id="videoBoard_btn">
           
            <a href="#"><img id="videoBoard_prev" src="http://www.csmu.edu.tw/ezfiles/0/1000/gallery/5/5/gallery_5_435372_43188.gif" /></a>
            <a href="#"><img id="videoBoard_next" src="http://www.csmu.edu.tw/ezfiles/0/1000/gallery/5/5/gallery_5_168669_43188.gif" /></a>
            &nbsp;<a href="http://podcast.csmu.edu.tw/podcast/episodes" target="_blank"><img src="http://www.csmu.edu.tw/ezfiles/0/1000/style/32/images/more.png"/></a>
        </div>
    </div>

CSS

#videoBoard{
            width:600px;
            height:170px;
            position:relative;
            padding:5px;
        }   
        #videoBoard_target{
            width:600px;
            height:140px;
            position:relative;
            padding:10px;
        }   
        #videoBoard_btn{
            text-align: right;    
        }
        .videoPlace0 {
            position:absolute; 
            left: 0px;
            top: 0px;
            width: 300px;
            height: 70px;
        }
        .videoPlace1 {
            position:absolute; 
            left: 160px;
            top: 0px;
            width: 300px;
            height: 70px;
        }
        .videoPlace2 {
            position:absolute; 
            left: 320px;
            top: 0px;
            width: 300px;
            height: 70px;
        }
        .videoPlace3 {
            position:absolute; 
            left: 490px;
            top: 0px;
            width: 300px;
            height: 70px;
        }
        .videoImg {
            height:110px;
        }
        .videoImg img{
            width: 100px;
        }
        .videoText {            
            vertical-align: top;
            position:relative;
            left:0px;
            top:0px; 
            width:130px;
        }
        .videoText a{
            font-family: Microsoft JhengHei;
            font-size: 14px; /*字體大小*/
            line-height: 22px; /*行高*/
            color: #000;
            text-decoration: none;    
        }

JavaScript

//*region 初始化
        $(document).ready(function () {
            
            // 放入物件
            setVideoItem();
            // 設定輪播元件
            setVideoCycle();
            
            
        });
        //*endregion



        //*region 放入物件
        function setVideoItem() {
            var result=videoBoard.replace(new RegExp("\n","gm"),"");
            // 取得文字內容
            var content = $.parseJSON(result);            
            // 資料筆數
            var itemAmount = content.length;
            // 每頁資料筆數
            var perPage = 4;
            // 總頁數
            var pageAmount = Math.ceil(itemAmount / perPage);
            
            
            // 設定頁面html
            var itemNo = 0; // 執行資料序號
            var pageHtml = "";
            for (var page = 1; page <= pageAmount; page++) {
                pageHtml += '<div>';
                // 設定位置html
                for (var place = 0; place < perPage; place++) {                               
                    // 如果全部資料都顯示了則從第0筆開始算（為了不要留空格）
                    if (itemNo >= itemAmount) {
                        itemNo = 0;
                    }
                    
                    // 連結
                    var _href = content[itemNo].videoUrl;
                    // 標題
                    var _title = content[itemNo].title;
                    // 圖檔連結
                    var _imgUrl = content[itemNo].imageUrl;
                    // 圖片提示文字
                    var _imgTitle = content[itemNo].title;
                    
                    // 組HTML
                    pageHtml += '<div class="videoPlace' + place + '" title = "' + _imgTitle + '">' +
                                        '<div class="videoImg"><a class="jumpWindow" href="' + _href + '" alt="' + _title + '" title="' + _title + '"><img src="' + _imgUrl + '" alt = "' + _imgTitle + '" title = "' + _imgTitle + '" /></a></div>' +
                                        '<div class="videoText"><a class="jumpWindow" href="' + _href +...