backstretch next＆previous buttons

Question

我正在使用backstretch jquery在我的網站上循環顯示圖像。我可以讓圖片循環運行，但我試圖添加「下一個」和「上一個」按鈕，但我無法讓它們工作。

當我點擊下一個按鈕時，沒有任何反應。

我的下一個按鈕看起來是這樣的：

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

而且我把我所有的jQuery代碼在頁面底部的身體緊貼標記之前。

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

它不是下一個/上一個按鈕不工作，它的初始調用傳遞的第一形象，不是一組圖像。

第二行（有暫停）在那裏，所以圖像不會自動改變，只有當我按下next/prev按鈕時它們纔會改變。

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/