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