jQuery幻燈片分頁問題

Question

我是jQuery newb，我一直在試圖爲我正在開發的頁面創建自定義幻燈片窗口小部件。我已經能夠獲得所有的基本功能（自動播放，暫停，標題），但是我已經在分頁時碰到一個障礙（允許您選擇幻燈片）。無論出於何種原因，一旦我嘗試選擇幻燈片，圖像和標題消失。沒有錯誤拋出它只是拒絕切換圖像或標題。繼承人的代碼：

這段代碼啓動幻燈片，並控制它

$(document).ready(function() { 
    var speed = 2000;        
    var state = 1;           

     $('#gallery li, #caption li').css('position','absolute');   

     $('#gallery li:first, #caption li:first').addClass('visible');    

     var timer = setInterval('autoSlideshow(-1)', speed);    

    $('#controls a.playpause').toggle(
     function() { 
      $(this).css('background-image','url(images/play.png)'); 
      clearInterval(timer); 
      state = 0; 
      return false; 
     }, 
     function() {   
      $(this).css('background-image','url(images/pause.png)'); 
      timer = setInterval('autoSlideshow(-1)', speed); 
      state = 1; 
      return false; 
     } 
    );   

    $('#controls a.pagination').click(function(){ 
     var slide = $(this).index(); 

     slide-=1; 
     clearInterval(timer); 
     timer = setInterval(function(){autoSlideshow(slide);}, speed); 


    }); 


    $('#gallery, #caption').hover(        
     function() { 
      if(state == 1) 
       clearInterval(timer); 
     }, 
     function() { 
      if (state == 1) 
       timer = setInterval('autoSlideshow(-1)', speed); 
     } 
    ); 


}); 

此位做了淡入淡出的幻燈片

function autoSlideshow(mode) { 
    var currentImage = $('#gallery li.visible');         
    var currentCaption = $('#caption li.visible'); 

    if(mode == -1){ 
     var nextImage = currentImage.next().length ? currentImage.next() :   
        currentImage.siblings(':first');   
     var nextCaption = currentCaption.next().length ? currentCaption.next() :   //Determine the next slide 
        currentCaption.siblings(':first'); 
    } 
    else{ 
     var nextImage = $('#gallery li:eq(mode)'); //I'm pretty sure these two lines are the problem 
     var nextCaption = $('#caption li:eq(mode)'); // 
    } 

    currentImage.fadeOut(250).removeClass('visible'); 
    nextImage.fadeIn(250).addClass('visible'); 
    currentCaption.fadeOut(250).removeClass('visible'); 
    nextCaption.fadeIn(250).addClass('visible'); 


} 

任何幫助你們可以給予讚賞。

莫

Answer 1

字符串常量，變量VS ....試試這個：

var nextImage = $('#gallery li:eq('+mode+')'); 
    var nextCaption = $('#caption li:eq('+mode+')'); 

這應該轉換模式爲字符串，從而均衡會得到一個編號，而不是單詞「模式」。

（注：我只是看着你強調了線，我沒有檢查或測試程序的其餘部分，可能還有其他的問題。）

編輯回答下面

問題你只是側身看着它。記住'等等等等'是一個字符串常量。它沒有評估。它保持靜態，不會改變。

另一種看待它的方法是記住編譯器和jQuery函數的區別。這是編譯器在我的聲明中看到的內容

將字符串常量'#caption li:eq('附加到變量模式的值（隱式轉換），然後追加字符串常量')'將結果傳遞給jQuery函數。

因此jQuery函數將調用與下面的字符串參數（如果模式的值爲9）：

'#caption li:eq(9)'

在你的代碼的jQuery被稱爲具有下列字符串參數

'#caption li:eq(mode)'

這是否清楚？