0

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

现在，我想做的是添加jquery idle-timer，并让它与一些 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 代码看起来像这样（它也可以工作）。它会在五秒钟后隐藏导航按钮，然后在您再次触摸页面时显示它们。 

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

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

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

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

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

4

1 回答 1

0

我没有在回弹中使用淡入/淡出，而是根据它所在的幻灯片制作了第一个脚本添加和删除一个类（我使用了“.showme”）。

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

然后 idletimer 脚本仅引用该类来淡入/淡出。

不完美，但它确实有效。无需尝试将实例放入全局变量中。

于 2013-06-19T19:07:10.790 回答