需要 jQuery GalleryView Beta3 播放/暂停控件

发布于 2024-11-05 04:06:52 字数 302 浏览 6 评论 0原文

我正在使用名为 GalleryView 的 jQuery 插件，其 Beta3 版本 (http://spaceforaname.com/galleryview)。 Beta4 版本计划内置播放/暂停动画控件。我的问题是：

如何从脚本外部模拟“播放”和“暂停”控件，而不需要修改 GalleryView 代码。有没有什么插件可以做到这一点？或者也许是无证行动？

在初始化过程中，可以决定是否要打开或关闭自动播放功能。

如果没有可用的操作/插件，您是如何解决的？您可以分享您应用的 GalleryView 修改吗？

问候， T。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

听风念你 2024-11-12 04:06:53

我通过修改原始 GalleryView 脚本解决了这个问题，添加以下内容：

脚本中的 paused 变量，存储暂停/播放的状态（true 如果暂停，false< /code> 如果正在播放），
添加了以下回调定义：
<前><代码>/*
** 播放暂停()
** 如果暂停则恢复幻灯片放映，如果幻灯片播放则暂停。
*/
函数播放暂停() {
如果（！暂停）{
// 500 毫秒后暂停幻灯片播放。这允许鼠标在画廊上短暂滑动，而无需不必要的暂停
$(文档).oneTime(0,"animation_pause",function(){
$(文档).stopTime(“过渡”);
暂停=真；
});
$('.gv-nav-play-pause').removeClass('gv-nav-pause').addClass('gv-nav-play');
} 别的 {
$(document).stopTime("animation_pause");
if(opts.transition_interval > 0) {
$(文档).everyTime(opts.transition_interval,"过渡",function(){
显示下一个项目（）；
});
暂停=假；
}
$('.gv-nav-play-pause').removeClass('gv-nav-play').addClass('gv-nav-pause');
}
};
添加了一个用于播放/暂停的按钮，对其进行了样式设置，并在点击时附加了playPause回调，并且一些触摸事件（以允许支持触摸的设备）。

它工作起来就像一个魅力，没有故障，但代码可能并不完美 - 我不得不使用原始的 GalleryView 代码，它本身并不完美。

I solved this by modifying original GalleryView script by adding the following things:

paused variable within script, storing the status of pause/play (true if paused, false if playing),

added the following callback definition:

/*
**  playPause()
**      Resume slideshow if paused, pause if slideshow playing.
 */
function playPause() {
    if(!paused) {
        // Pause slideshow in 500ms. This allows for brief swipes of the mouse over the gallery without unnecessarily pausing it
        $(document).oneTime(0,"animation_pause",function(){
            $(document).stopTime("transition");
            paused = true;
        });
        $('.gv-nav-play-pause').removeClass('gv-nav-pause').addClass('gv-nav-play');
    } else {
        $(document).stopTime("animation_pause");
        if(opts.transition_interval > 0) {
            $(document).everyTime(opts.transition_interval,"transition",function(){
                showNextItem();
            });
            paused = false;
        }
        $('.gv-nav-play-pause').removeClass('gv-nav-play').addClass('gv-nav-pause');
    }
};