Question

首先，我是jquery的初学者，所以请温柔:)。最近我发现了这个教程：http://fearlessflyer.com/2010/08/how-to-create-your-own-jquery-content-slider/，它展示了如何为初学者创建幻灯片。我完全按照教程，但我无法使幻灯片显示工作。使用firebug，我注意到我收到了“ ReferenceError：theImage is not defined ”错误消息。有人可以帮我理解为什么会发生这种错误。

所有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>

我在firebug中收到的错误消息指向 $（theImage）.each（代码行，如上面的注释中所示。可以在使用 .noConflict（）功能？若有，请允许我告诉我该怎么做，因为我没有找到有关这个主题的任何有用信息。

Answer 1

您在theImage的回调中定义$(window).load()：

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

该回调之外不存在

theImage。您必须在回调之外定义它：

var theImage;

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

或者将$.each移到同一个回调中。

幻灯片参考错误

1 个答案: