Question

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

现在，我想要做的是添加jquery idle-timer，并让它与一些后伸的元素进行交互。

我有一段代码正在运行，根据我所处的项目显示和隐藏某些元素。

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代码看起来像这样（它也可以工作）。它会在五秒钟后隐藏导航按钮，然后在您再次触摸该页面时显示它们。

$(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按钮显示在idle-timer的第二部分。

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

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

尽管如此，这给我一个关于未定义索引的错误。所以我可以打破指数＆amp; instance.index为idleTimer访问的全局变量？如果是这样，怎么样？

Answer 1

我没有在backstretch中使用fadein / out，而是根据它所在的幻灯片添加并删除了一个类（我使用了“.showme”）。

该showme类仅为display:block;，我将元素设置为默认值为display:none;

然后，idletimer脚本仅指向那一个淡入/淡出的类。

不完美，但确实有效。无需尝试将实例捕获到全局变量中。

backstretch和idle-timer - 让它们值得一起

1 个答案: