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( 行を指しています。この件に関して役立つ情報が見つからなかったので、その方法を教えてください。

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 に答える