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

Point to html page after last slide of html5 gallery

本文关键字:幻灯片 一张 页面 html html5 最后 指向      更新时间:2023-09-29

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

谢谢你的帮助。Simone

您可以挂接回第一张幻灯片的逻辑。这是通过检查下一个元素是否是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");
    }
},

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