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();
    };
});

在第一张图片上，它仅显示“下一步”按钮。最后，只有“prev”按钮。其余的两个按钮

空闲计时器代码如下所示（它也可以工作）。它会在五秒钟后隐藏导航按钮，然后在您再次触摸页面时显示它们

$(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);
    });
});

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

所以我想我希望它看起来像这样（这不起作用）：

---

但是，这给了我一个关于未定义索引的错误。那么，我可以将index&instance.index分解为全局变量，以便idleTimer访问吗？如果是这样，怎么做？

我没有在backstretch中使用fadein/out，而是让第一个脚本根据它在哪个幻灯片上添加和删除一个类（我使用了“.showme”）

showme类只是一个

display:blockdisplay:none

然后idletimer脚本只引用一个类来fadeIn/Out

虽然不完美，但确实有效。无需尝试将实例提取到全局变量中

$(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);
        };  
    });
});