0

首先，我是 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()函数时找到此错误的解决方案？如果可以，请显示我该怎么做，因为我没有找到关于这个主题的任何有用信息。

4

1 回答 1

0

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

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

theImage在该回调之外不存在。您要么必须在回调之外定义它：

var theImage;

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

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

于 2013-05-19T00:22:16.103 回答