Javascript 指向html5图库最后一张幻灯片后的html页面

我对html5图库有问题。 此库必须指向上次幻灯片转换后的html页面。 我有3张幻灯片（由图片组成的一种飞溅），在第三张图片之后，我想在我的网站主页上重定向

<div class="slider">
    <figure class="active">
        <img src="gallery/hp-1.jpg" onload="imageLoaded();" alt="image 1" />
    </figure>
    <figure>
        <img src="gallery/hp-2.jpg" alt="image 2" />
    </figure>
    <figure>
        <img src="gallery/hp-3.jpg" alt="image 3" />
    </figure>
</div>

<script>
(function($, window, document, undefined) {

    var Html5Gallery = {

        isTransitionInProgress : false,
        isMusicPlaying         : false,
        fMusicPlayer           : null,
        nextSwitch             : null,
        fMusicPlayerIsLoaded   : false,
        isWindowReady          : false,
        imageIsStillLoading    : true,

        init : function(element, options) 
        {
            var self = this;
            $(window).ready(function(){
                self.isWindowReady = true;
                if (!self.imageIsStillLoading) {
                    self.handleReadness();
                }
            });

            this.options = $.fn.extend({}, $.fn.Html5Gallery.options, options);
            this.imageIsStillLoading = true;

            $(window).bind("resize", this.handleResizing);

            window.flashIsLoaded = function() {
                self.flashPlayerLoaded();
            };

            window.imageLoaded = function() {

                if(!$("figure.active img").get(0).complete)
                {
                    self.isTransitionInProgress = true;
                    setTimeout(imageLoaded, 100);     
                    return;
                }

                self.imageIsStillLoading = false;

                if (self.isWindowReady) {
                    self.handleReadness();
                }
            };

        },

        nextImage: function(e)
        {
            if (this.isTransitionInProgress)
            {
                return;
            }

            this.cancelNextScheduledImage();

            var from = $("figure.active");
            var to = (from.next().is("figure") ? from.next() : from.parent().children(":first"));
            this.isTransitionInProgress = true;
            this.switchImages(from, to);
        },

        prevImage: function(e)
        {
            if (this.isTransitionInProgress)
                return;

            var from = $("figure.active");
            var to = (from.prev().is("figure") ? from.prev() : from.parent().children(":last"));
            this.isTransitionInProgress = true;
            this.switchImages(from, to);
        },

        switchImages: function(from, to)
        {
            var self              = this;
            var isNextImageLoaded = to.children("img").get(0).complete;
            if (isNextImageLoaded)
            {
                from.stop().fadeOut(self.options.transitionSpeed, function(){

                    from.removeClass("active").css("display", "none");
                    to.addClass("active");
                    self.handleResizing();
                    to.hide().fadeIn(self.options.transitionSpeed, function(){
                        self.isTransitionInProgress = false;
                        self.scheduleNextImage();
                    });
                });

                return;
            }

            $("#loading").hide().fadeIn(self.options.transitionSpeed, function(){
                from.removeClass("active").css("display", "none");
                to.addClass("active");
                if (isNextImageLoaded)
                {
                    self.handleResizing();
                    self.hideLoading();
                }   
                else
                {
                    imageLoaded();
                }
            });
        },

        hideLoading: function()
        {
            var self = this;

            $("#loading").fadeOut(this.options.transitionSpeed, function(){
                self.isTransitionInProgress = false;
                self.scheduleNextImage();
            });
        },

        cancelNextScheduledImage: function()
        {
            clearTimeout(this.nextSwitch);
            this.nextSwitch = null;
        },

        scheduleNextImage: function()
        {
            var self = this;
            this.cancelNextScheduledImage();
            if (!this.isTransitionInProgress && this.options.autoSwitch)
            {
                this.nextSwitch = setTimeout(function(){
                    self.nextImage();
                }, this.options.pauseOnPictureFor);
            }
        },

    };
})
</script>

（函数（$，窗口，文档，未定义）{
var Html5Gallery={
isTransitionInProgress:错误，
isMusicPlaying:错，
fmusiclayer:null，
nextSwitch:null，
FMusicLayerLoaded:false，
isWindowReady:false，
imageIsStillLoading:对，
init：函数（元素、选项）
{
var self=这个；
$（窗口）.ready（函数（）{
self.isWindowReady=true；
如果（！self.imagestillload）{
自我控制能力（）；
}
});
this.options=$.fn.extend（{}，$.fn.Html5Gallery.options，options）；
this.imageIsStillLoading=true；
$（window.bind（“resize”，this.handleResising）；
window.flashIsLoaded=函数（）{
self.flashPlayerLoaded（）；
};
window.imageLoaded=函数（）{
如果（！$（“figure.active img”）.get（0.complete）
{
self.isTransitionInProgress=true；
设置超时（imageLoaded，100）；
返回；
}
self.ImagesStillLoading=false；
if（self.isWindowReady）{
自我控制能力（）；
}
};
},
下一页：函数（e）
{
如果（此.isTransitionInProgress）
{
返回；
}
此.cancelNextScheduleImage（）文件；
var from=$（“figure.active”）；
var to=（from.next（）.is（“图”）？from.next（）：from.parent（）.children（“：first”）；
this.isTransitionInProgress=true；
此。切换图像（从、到）；
},
图像：函数（e）
{
如果（此.isTransitionInProgress）
返回；
var from=$（“figure.active”）；
var to=（from.prev（）.is（“图”）？from.prev（）：from.parent（）.children（“：last”）；
this.isTransitionInProgress=true；
此。切换图像（从、到）；
},
切换图像：功能（从、到）
{
var self=这个；
var isNextImageLoaded=to.children（“img”）.get（0）.complete；
如果（isNextImageLoaded）
{
from.stop（）.fadeOut（self.options.transitionSpeed，function（））{
from.removeClass（“active”）.css（“display”、“none”）；
to.addClass（“主动”）；
自处理（）；
to.hide（）.fadeIn（self.options.transitionSpeed，function（））{
self.isTransitionInProgress=false；
self.scheduleNextImage（）；
});
});
返回；
}
$（“#加载”）.hide（）.fadeIn（self.options.transitionSpeed，function（））{
from.removeClass（“active”）.css（“display”、“none”）；
to.addClass（“主动”）；
如果（isNextImageLoaded）
{
自处理（）；
self.hideLoading（）；
}   
其他的
{
imageLoaded（）；
}
});
},
hideLoading:function（）
{
var self=这个；
$（“#加载”）.fadeOut（this.options.transitionSpeed，function（）{
self.isTransitionInProgress=false；
self.scheduleNextImage（）；
});
},
CancelNextScheduleImage:函数（）
{
clearTimeout（this.nextSwitch）；
this.nextSwitch=null；
},
scheduleNextImage:函数（）
{
var self=这个；
此.cancelNextScheduleImage（）文件；
if（！this.isTransitionInProgress&&this.options.autoSwitch）
{
this.nextSwitch=setTimeout（函数（）{
self.nextImage（）；
}，this.options.pauseOnPictureFor）；
}
},
};
})

您可以下载包含所有代码的html文件

谢谢你的帮助。

---

Simone

您可以连接到循环回到第一张幻灯片的逻辑。这是通过检查下一个元素是否是

图形

元素来实现的，如果不是，则抓取第一个

图形

元素并切换到它。您可以覆盖此逻辑，在最后一张幻灯片显示后重定向页面（未测试）：

---

为了速度和清晰度，我已经对URL进行了硬编码，但是更好的方法是通过

options

对象将URL传递给插件，该对象作为

init

方法的参数接收

感谢可用性和投入的时间。我不精通javascript。我试图添加你建议的代码，但这似乎不起作用。这是最新的。在第三张图片之后，循环仍在继续。你能发布一个插件代码未缩小的版本吗？理想情况下，如果可能的话，我会在回家的路上在火车上玩一玩。你给我的东西不能在当地得到有效的实施。如果你能把一个经过测试的工作zip或者（理想的）一个jsfiddle放在一起，我将能够帮助你。我会更新工作库，还有一个zip。我希望上传的文件是正确的！非常感谢您的帮助和帮助！

nextImage: function(e)
{
    if (this.isTransitionInProgress)
    {
        return;
    }

    this.cancelNextScheduledImage();

    var from = $("figure.active");
    // var to = (from.next().is("figure"); ? from.next() : from.parent().children(":first"));
    var to = from.next(); 

    if (to.is("figure")) {
        this.isTransitionInProgress = true;
        this.switchImages(from, to);
    } else {
        window.location.replace("http://stackoverflow.com");
    }
},