0

我有一个 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>

您可以在此处下载包含所有代码的 html 文件。

感谢您的帮助。西蒙娜

4

1 回答 1

0

您可以挂钩返回到第一张幻灯片的逻辑。这通过检查下一个元素是否是一个figure元素来工作，如果不是，则抓住第一个figure元素并切换到它。您可以覆盖此逻辑以在最后一张幻灯片显示后重定向您的页面（未经测试）：

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");
    }
},

options为了速度和清晰度，我已经对 URL 进行了硬编码，但更好的方法是通过它作为方法参数接收的对象将 URL 传递给插件init。

于 2012-07-17T11:31:46.573 回答