自己寫的兩個JQ部件 其一 圖片輪播SlideShow

這些想法是給我們學校我們系做主頁的時候想出來的點子，想想拿別人的代碼改又太麻煩，就自己寫了一個。

剛剛整理好一個，另外一個還在做，先把這個的代碼碼出來吧。具體的實現過程以後再追加了。

/* *******************************************************************
模塊名稱：RME_Storyboard_SlideShow
版本：v1.0.1571
開發語言：JS + JQuery

注：開發時使用的是JQuery 1.11，需要使用的話，請引用相應JQuery的JS，與其他版本兼
	容性未測試。

創建時間：2015年6月30日 14:09:36
最後修改：2015年6月30日 21:35:03

修訂記錄：
2015年6月30日 21:35:20
    版本升級至v1.0.1571，基本功能已實現，已發現BUG基本消除。

作者：Toshiya @ RMEGo Studio
描述：本代碼用於網站中輪播圖片的顯示，細分模塊，靈活度比較高。您可以將本代碼使用於
	任何非商業用途行爲而不需要經過作者同意，如果您將本代碼用於商業行爲，請與本作者
	聯繫，經過同意之後才能使用，謝謝。
	
※使用時請保留此註釋，謝謝。
******************************************************************** */

if (typeof (RMEGo) == "undefined") {
    RMEGo = {};
}

RMEGo.SlideShow = {
    //json文件位置，可以引用ASPX等動態頁面生成。
    jsonfile: "database/storyboard.json",

    //爲JQuery提供selector，該項表示SlideShow的最外層容器的選擇器。
    container: "#div.storyboard",
    //爲JQuery提供selector，該項表示SlideShow的顯示圖片的層
    LayoutDisplay: "#storyboard_display",
    //爲JQuery提供selector，該項表示SlideShow的第一個動畫層
    LayoutCanvas1: "#storyboard_canvas1",
    //爲JQuery提供selector，該項表示SlideShow的第二個動畫層
    LayoutCanvas2: "#storyboard_canvas2",
    //爲JQuery提供selector，該項表示SlideShow的下一張按鈕
    NextHandle: "#storyboard_next",
    //爲JQuery提供selector，該項表示SlideShow的上一張按鈕
    PrevHandle: "#storyboard_prev",

    //以下變量請視爲私有。。除非特別瞭解的情況下，請不要隨意操作。
    isPlayed: true,
    isAnimated: false,
    index: 0,


    //======================以下爲類方法=======================


    //當鼠標移入移出容器時的操作。
    WhenMouseOnContainer: function () {
        $(RMEGo.SlideShow.container).mouseenter(function () {
            RMEGo.SlideShow.isPlayed = false;
        });
        $(RMEGo.SlideShow.container).mouseleave(function () {
            RMEGo.SlideShow.isPlayed = true;
        });
    },

    //使用Json和當前的index更新前端的相應顯示
    //*************您可能會需要改寫此方法以適配您的前端**************
    Update: function () {
        if (RMEGo.SlideShow.index < 0) RMEGo.SlideShow.index = RMEGo.SlideShow.jsondata.Total - 1;
        $("#storyboard_label .monthday").text(RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].monthday);
        $("#storyboard_label .year").text(RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].year);
        $("#storyboard_label .text").attr("href", RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].href);
        $("#storyboard_label .text").text(RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].title);
        $("#storyboard_display").css({ "background-image": "url(images/" + RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].image + ")" });
    },

    //主循環，用於自動輪播
    MainLoop: function () {
        if (RMEGo.SlideShow.isPlayed) RMEGo.SlideShow.SlideToPrev();
        setTimeout("RMEGo.SlideShow.MainLoop()", 5000);
    },

    //將canvas1和canvas2的動畫狀態置爲初態。
    CleanStatus: function () {
        $(RMEGo.SlideShow.LayoutCanvas1).removeClass("prevcurrent");
        $(RMEGo.SlideShow.LayoutCanvas2).removeClass("prevtarget");
        $(RMEGo.SlideShow.LayoutCanvas1).removeClass("nextcurrent");
        $(RMEGo.SlideShow.LayoutCanvas2).removeClass("nexttarget");
        RMEGo.SlideShow.isAnimated = false;
    },

    //切換到上一張的動作
    SlideToPrev: function () {
        if (RMEGo.SlideShow.isAnimated == true) return;
        RMEGo.SlideShow.isAnimated = true;
        $(RMEGo.SlideShow.LayoutCanvas1).css({ "display": "block", "background-image": "url(images/" + RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].image + ")" });
        $(RMEGo.SlideShow.LayoutDisplay).css({ "display": "none" });
        RMEGo.SlideShow.index--;
        if (RMEGo.SlideShow.index < 0) RMEGo.SlideShow.index = RMEGo.SlideShow.jsondata.Total - 1;
        $(RMEGo.SlideShow.LayoutCanvas2).css({ "display": "block", "background-image": "url(images/" + RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].image + ")" });
        $(RMEGo.SlideShow.LayoutCanvas1).addClass("prevcurrent");
        $(RMEGo.SlideShow.LayoutCanvas2).addClass("prevtarget");
        setTimeout("RMEGo.SlideShow.Update()", 500);
        setTimeout("RMEGo.SlideShow.EndAction()", 1000);
    },

    //切換到下一張的動作
    SlideToNext: function () {
        if (RMEGo.SlideShow.isAnimated == true) return;
        RMEGo.SlideShow.isAnimated = true;
        $(RMEGo.SlideShow.LayoutCanvas1).css({ "display": "block", "background-image": "url(images/" + RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].image + ")" });
        $(RMEGo.SlideShow.LayoutDisplay).css({ "display": "none" });
        RMEGo.SlideShow.index++;
        if (RMEGo.SlideShow.index >= RMEGo.SlideShow.jsondata.Total) RMEGo.SlideShow.index = 0;
        $(RMEGo.SlideShow.LayoutCanvas2).css({ "display": "block", "background-image": "url(images/" + RMEGo.SlideShow.jsondata.StoryBoard[RMEGo.SlideShow.index].image + ")" });
        $(RMEGo.SlideShow.LayoutCanvas1).addClass("nextcurrent");
        $(RMEGo.SlideShow.LayoutCanvas2).addClass("nexttarget");
        setTimeout("RMEGo.SlideShow.Update()", 500);
        setTimeout("RMEGo.SlideShow.EndAction()", 1000);
    },

    //不管是向哪邊切換，最後都要進行的收尾工作。
    EndAction: function () {
        $(RMEGo.SlideShow.LayoutCanvas1).css({ "display": "none" });
        $(RMEGo.SlideShow.LayoutCanvas2).css({ "display": "none" });
        $(RMEGo.SlideShow.LayoutDisplay).css({ "display": "block" });
        RMEGo.SlideShow.CleanStatus();
    },
}


//啓動網站時所需要的一些工作
$(document).ready(function () {
    $.getJSON(RMEGo.SlideShow.jsonfile, function (data) {
        RMEGo.SlideShow.jsondata = data;
        RMEGo.SlideShow.Update();
        RMEGo.SlideShow.MainLoop();
        RMEGo.SlideShow.WhenMouseOnContainer();
    });
})