3

我正在使用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 >

使用萤火虫调试，我得到这个：

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

3 回答 3

3

后伸调用是错误的。

而不是这个：

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

我想要这个：

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

并不是下一个/上一个按钮不起作用，而是最初的调用传递了第一个图像，而不是图像集。

第二行（带有暂停）在那里，因此图像不会自动更改，它们仅在我点击下一个/上一个按钮时才会更改。

于 2013-05-22T20:13:21.440 回答
1

试试这个： 

$('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();
    });
于 2013-08-28T12:55:10.167 回答
0

我正在尝试解决您的相同问题...

        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/

于 2013-09-26T08:49:27.993 回答