自己写的两个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();
    });
})