Javascript JQuery幻灯片、progressbar和未注销的事件
我很难弄清楚我的问题。 jqueryoff方法似乎不起作用 这就是我要做的。我正在使用一个名为Slideshowify的插件创建一个带有ken burns效果的幻灯片，并使用一个jquery进度条显示每个图像在屏幕上显示的时间 问题是插件无法处理窗口大小调整。因此，我试图实现的是注册到窗口大小调整事件，并在调整窗口大小时重置插件 为了启动和重新启动我的进度条，我使用了两个事件，一个在图像显示之前，一个在图像隐藏之后。所有这些都可以正常工作，但问题是off方法似乎没有注销事件 因此，如果多次调整窗口大小，许多事件将被注册和触发，并且进度条将在不需要时重置 代码如下：Javascript JQuery幻灯片、progressbar和未注销的事件,javascript,jquery,html,events,slideshow,Javascript,Jquery,Html,Events,Slideshow,我很难弄清楚我的问题。 jqueryoff方法似乎不起作用 这就是我要做的。我正在使用一个名为Slideshowify的插件创建一个带有ken burns效果的幻灯片，并使用一个jquery进度条显示每个图像在屏幕上显示的时间 问题是插件无法处理窗口大小调整。因此，我试图实现的是注册到窗口大小调整事件，并在调整窗口大小时重置插件 为了启动和重新启动我的进度条，我使用了两个事件，一个在图像显示之前，一个在图像隐藏之后。所有这些都可以正常工作，但问题是off方法似乎没有注销事件 因此，如果多次调整窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.transit.min.js"></script>
<script src="~/Scripts/jquery.slideshowify.js"></script>
<script type="text/javascript">
function startSlideShow()
{
$("body").off(); //unregister the events
$("div[id^='slideshowify']").remove(); //remove the div that the plugin created
$("#slideshow img").slideshowify();
$("body").on("beforeFadeIn", onBeforeFadeIn); //event fired before an image is shown
$("body").on("beforeFadeOut", onBeforeFadeOut); //event fired before an image is hidden
}
function onBeforeFadeIn(e, img)
{
startProgress();
}
function onBeforeFadeOut(e, img)
{
startProgress();
}
function startProgress()
{
$("#progressbar .ui-progressbar-value").stop(true, true); //stop the progress animation
$("#progressbar").progressbar({ value: 0.1 }); //create/reset the progress bar
$("#progressbar .ui-progressbar-value").animate({ width: "100%" }, 9000); //start the progress animation
}
function onWindowResize()
{
startSlideShow();
startProgress();
}
$(document).ready(function ()
{
startSlideShow();
$(window).resize(onWindowResize); //event fired when the window is resized
});
</script>
</head>
<body>
<div id="slideshow">
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0001.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0002.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0003.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0004.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0006.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0012.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0014.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0016.jpg" />
</div>
<div id="progressbar" style="height:20px; width:100%;"></div>
</body>
</html>
试验
函数startSlideShow（）
{
$（“body”）.off（）；//注销事件
$（“div[id^='slideshowify']）。remove（）；//删除插件创建的div
$（“#slideshow img”）.slideshowify（）；
$（“body”）.on（“beforeFadeIn”，onBeforeFadeIn）；//在显示图像之前激发的事件
$（“body”）.on（“beforeFadeOut”，onBeforeFadeOut）；//在隐藏图像之前激发的事件
}
函数onBeforeFadeIn（e，img）
{
startProgress（）；
}
衰减前功能开启（e、img）
{
startProgress（）；
}
函数startProgress（）
{
$（“#progressbar.ui progressbar value”）.stop（true，true）；//停止进度动画
$（“#progressbar”）.progressbar（{value:0.1}）；//创建/重置进度条
$（“#progressbar.ui progressbar value”）.animate（{width:“100%”，9000）；//启动进度动画
}
函数onWindowResize（）
{
startSlideShow（）；
startProgress（）；
}
$（文档）.ready（函数（）
{
startSlideShow（）；
$（窗口）.resize（onWindowResize）；//调整窗口大小时激发的事件
});
$(window).resize(onWindowResize);
可悲的是，这似乎没有改变任何事情。我甚至在调整窗口大小时放置了一个console.log，我可以确认调整大小只调用了一次。所谓调用一次，我的意思是，当您双击浏览器的标题栏时，调整大小事件只触发一次，问题仍然存在。
$(window).bind('resize', function(e)
{
window.resizeEvt;
$(window).resize(function()
{
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function()
{
//code to do after window is resized
}, 250);
});
});