Question

我正在使用backstretch jquery在我的网站上循环播放图像。我可以让图像循环好，但我正在尝试添加“下一个”和“上一个”按钮，我无法让它们工作。

当我点击下一个按钮时，没有任何反应。

我的下一个按钮如下所示：

<a id="next" href="#"><img src="/images/arrow-right.png">

我将所有jquery代码放在body关闭标记之前的页面底部。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.backstretch.js"></script>
<script>
    var images = [
    "/images/backgrounds/Image01.jpg",
    "/images/backgrounds/Image02.jpg",
    "/images/backgrounds/Image03.jpg"
    ];

    $(images).each(function() {
       $('<img/>')[0].src = this; 
    });

    // The index variable will keep track of which image is currently showing
    var index = 0;

    $.backstretch(images[index], {speed: 500});

    $('#next').click(function(x) {
        x.preventDefault();
        $('body').data('backstretch').next();
    });
    $('#prev').click(function(x) {
        x.preventDefault();
        $('body').data('backstretch').prev();
    });
</script >

使用firebug进行调试，我得到了这个：

    TypeError: $(...).data(...) is undefined
    $('body').data('backstretch').next();

Answer 1

后伸电话是错误的。

而不是：

    $.backstretch(images[index], {speed: 500});

我想要这个：

    $.backstretch(images, {speed: 500});
    $('body').data('backstretch').pause();

并不是下一个/上一个按钮不起作用，而是初始调用是通过第一张图像而不是图像集。

第二行（w /暂停）是这样的，所以图像不会自动改变，只有当我点击下一个/上一个按钮时它们才会改变。

Answer 2

请改为尝试：

$('body').backstretch(images[index], {speed: 500});
$('#next').click(function(x) {
        x.preventDefault();
        $('body').data('backstretch').next();
    });
$('#prev').click(function(x) {
        x.preventDefault();
        $('body').data('backstretch').prev();
    });

Answer 3

我正在努力解决你的同样问题......

        var rootUrl = "http://www.sagmeisterwalsh.com";
    var images = [
    rootUrl+"/images/u_work/Aizone-11.jpg",
    rootUrl+"/images/u_work/Aizone-12.jpg",
    rootUrl+"/images/u_work/Aizone-13.jpg"

    ];

    $(images).each(function() {
       $('<img/>')[0].src = this; 
    });


    var index = 0;
    var i = 1;


    $.backstretch(images[index], {
        fade: 750,
        duration: 4000
    });

     $('#next').click(function(x) {
        x.preventDefault(); 


             $.backstretch(images[i++], {
                fade: 750,
                duration: 4000

            });

         $('#output').html(function(i, val) { return val*1+1 });
    });


    $('#prev').click(function(x) {
        x.preventDefault();
           $.backstretch(images[i--], {
               fade: 750,
                duration: 4000
           });
     $('#output').html(function(i, val) { return val*1-1 });   

    });

试试这个：

http://jsfiddle.net/XejZV/

后伸缩＆amp;以前的按钮

3 个答案: