指向html5库最后一张幻灯片后的html页面
Point to html page after last slide of html5 gallery
我有一个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传递给插件。
相关文章:
- jm按下停止步骤进入滚动的下一张幻灯片
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- 引导程序3转盘-随机选择下一张幻灯片
- 如何在最后一张幻灯片上停止动画
- 完整的背景图片幻灯片jquery,想让幻灯片的最后一张图片可以点击
- Basic jQuery Slider中上一张/下一张幻灯片的自定义链接触发器
- 指向html5库最后一张幻灯片后的html页面
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 如何停止幻灯片放映隐藏文本和图像跳到顶部,而下一张幻灯片进来
- jQuery幻灯片,转到上一张图片
- iOS 滑块默认为最后一张幻灯片
- 光滑的滑块删除最后一张幻灯片,如果 winWidth < 500
- Javascript幻灯片在节目开始时快速出现最后一张图像
- BX滑块滑块滑块最后一张幻灯片总是隐藏某些部分
- 滑入下一张柔性滑块幻灯片后,css 动画不起作用
- 如何在显示前在幻灯片放映中预加载下一张幻灯片
- 滑块中显示下一张幻灯片的链接.为什么
- 如何获取最后一张和第一张幻灯片以相应地激活或禁用下一个和上一个按钮
- 幻灯片放映-将幻灯片链接到URL,仅适用于最后一张幻灯片