幻燈片參考錯誤

首先，我是一個jQuery初學者，所以請溫柔:)最近我發現本教程：http://fearlessflyer.com/2010/08/how-to-create-your-own-jquery-content-slider/，它顯示瞭如何爲初學者創建幻燈片。我完全按照教程，但我無法使幻燈片顯示工作。使用螢火蟲，我注意到我得到一個「ReferenceError：圖像未定義」錯誤信息。有人可以幫我理解爲什麼會出現這個錯誤。幻燈片參考錯誤

所有的CSS和JavaScript的HTML文檔中完成，如下所示：

<style> 
*{padding:0; margin:0;} 
ul {} 
ul li {float:left; list-style:none; position:relative; } 
ul li a.next {position:absolute; left:100px;} 
ul li a.previous{position:absolute; left:0px;} 
ul li a.startover{position:absolute; left:200px;} 
</style> 
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

<script> 

$(window).load (function() { 
var theImage = $('ul li img'); 
var theWidth = theImage.width() 
//wrap into mother div 
$('ul').wrap('<div id="mother" />');      
//assign height width and overflow hidden to mother 
$('#mother').css({ 
    width: function() { 
    return theWidth; 
}, 
    height: function() { 
    return theImage.height(); 
    }, 
    position: 'relative', 
    overflow: 'hidden'  
}); 
//get total of image sizes and set as width for ul 

var totalWidth = theImage.length * theWidth; 
$('ul').css({ 
    width: function(){ 
    return totalWidth; 
}    
});  

});//doc ready 


$(theImage).each(  <!-- The firebug error points to this line in code -->  
function(intIndex){    
$(this).nextAll('a') 
.bind("click", function(){ 
    if($(this).is(".next")) { 
     $(this).parent('li').parent('ul').animate({ 
      "margin-left": (-(intIndex + 1) * theWidth)    
       }, 1000)  
     } else if($(this).is(".previous")){ 
     $(this).parent('li').parent('ul').animate({ 
      "margin-left": (-(intIndex - 1) * theWidth)    
     }, 1000)  
     } else if($(this).is(".startover")){ 
     $(this).parent('li').parent('ul').animate({ 
      "margin-left": (0)    
     }, 1000) 
} 
});//close .bind()         
});//close .each() 

</script> 

</head>

該錯誤消息我的螢火指向$得到（theImage）。每個（行代碼顯示在上面的註釋中，可以在使用.noConflict（）函數找到這個錯誤的解決方案嗎？如果有的話請告訴我如何去做，因爲我沒有找到關於這個主題的任何有用的信息。

來源

2013-05-19 ShaunBach

您定義了theImage回調的$(window).load()：

$(window).load(function() { 
    var theImage = $('ul li img');

theImage不認爲回調之外存在。要麼你必須定義它回調之外：

var theImage; 

$(window).load(function() { 
    theImage = $('ul li img');

或移動$.each到同一個回調。

來源

2013-05-19 00:22:16 Blender

感謝@Blender的幫助，你的建議是有意義的（儘管），儘管我原來做的事情並不是我的代碼中的問題。我忘了做的是在doc準備好的右括號內關閉第二部分代碼（從上面代碼中得到螢火蟲錯誤開始的代碼）。所以基本上我做錯了是：$（window）.load（function（）{...第一位代碼....}）; // doc Ready ...第二位代碼。解決的辦法是在}）; // doc準備好關閉括號之前放置第二個代碼（發出螢火蟲錯誤的代碼）。它的工作原理。 – ShaunBach

幻燈片參考錯誤

回答

相關問題