反向伸展和空闲计时器——让它们值得在一起

Question

我正在使用backstretch.js jquery模块来制作背景幻灯片。

现在，我想做的是添加jquery空闲计时器，并让它与backstretch的一些元素交互。

我有一段代码工作，它显示和隐藏某些元素基于什么项目我在。

Backstretch代码如下所示:

var images = [
    "/images/01.jpg",
    "/images/02.jpg",
    "/images/03.jpg"
];
// The index variable will keep track of which image is currently showing
var index = 0;
// Call backstretch for the first time, and increments the index instance.
$.backstretch(images, {speed: 500});
//immediately pause the slideshow
$('body').data('backstretch').pause();
$(window).on("backstretch.show", function (e, instance) {
     if (instance.index === 0 ) {
        $('#prev').hide();
        $('#next').show();
    } else if (instance.index === instance.images.length - 1) {
        $('#prev').hide();
        $('#next').hide();
    } else {
        $('#prev').show();
        $('#next').show();
    };
});

在第一张图片中，它只显示了"下一个"按钮。最后，只有"上一步"按钮。在其余部分，两个按钮。

Idle-Timer代码看起来是这样的(它也可以工作)。它会在5秒后隐藏导航按钮，然后在你再次触碰页面时显示出来。

$(document).ready(function(){
    $(document).idleTimer( 5000 );
        $(document).bind("idle.idleTimer", function(){
        $("#prev").fadeOut(1000);
        $("#next").fadeOut(1000);
    });
    $(document).bind("active.idleTimer", function(){
        $("#prev").fadeIn(1000);
        $("#next").fadeIn(1000);
    });
});

当显示第一张图片时，您将只看到下一个按钮，然后等待，按钮将隐藏。然后移动鼠标，下一个和 prev按钮显示空闲定时器的第二部分。

所以我想让它看起来像这样(这不起作用):

$(document).ready(function(){
    $(document).idleTimer( 5000 );
        $(document).bind("idle.idleTimer", function(){
        $("#prev").fadeOut(1000);
        $("#next").fadeOut(1000);
    });
    $(document).bind("active.idleTimer", function(){
        if (instance.index === 0 ) {
            $("#next").fadeIn(1000);
        } else if (instance.index === instance.images.length - 1) {
            $("#prev").fadeIn(1000);
        } else { 
            $("#prev").fadeIn(1000);
            $("#next").fadeIn(1000);
        };  
    });
});

但是，这会给我一个没有定义索引的错误。那么我可以打破索引&实例。索引到全局变量为idleTimer访问?如果有，怎么做?

Answer 1

我没有在backstretch中使用淡出/淡出，而是根据它所在的幻灯片添加和删除了一个类(我使用了".showme")。

showme类只是一个display:block;，我将元素设置为默认的display:none;

然后idletimer脚本只引用一个类来淡出。

不完美，但确实有效。而不必尝试将实例捞出到全局变量中。