4

このコードをチュートリアルから取得して、javascript/jQuery で自動進行スライドショーを作成しましたが、jsfiddle でうまく機能します。しかし、Dreamweaver にすべてを持ち込むと、機能しなくなったようです。関連するすべてのファイル (.js と .css) と jQuery ライブラリをリンクしました。なんらかの理由で、まったく機能しません。これがコードです。

HTML

<div class="fadeIn">
            <img src="image1.png" height="500" width="800"/>
            <img src="image2.png" height="500" width="800"/>
            <img src="image3.png" height="500" width="800"/>
            <img src="image4.png" height="500" width="800"/>
        </div>

CSS

.fadeIn {
    position: relative;
    width: 800px;
    height: 500px;
}

.fadeIn img {
    position: absolute;
    left:0;
    top:0;
}

Javascript/jQuery

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
    $('.fadeIn :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadeIn');
    }, 3000);
});

ヘッダーはこちら

<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="SlideShow.css">
4

3 に答える 3

11

早速試してみたところ、ご指摘のエラーを再現することができました。関数に外部 js ファイルがあり、他の JS ライブラリに依存している場合は、最初にそのライブラリをロードしてから、依存する JS ファイルを関数にロードする必要があります。

たとえば、これは機能しません。

<script src="slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

なぜなら、JS インタプリタの $ before の検索も読み込まれて定義されているからです。

しかし、これはうまくいきます：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slideshow.js"></script>
于 2013-10-18T18:48:56.493 に答える
1

現在のバージョンの jquery を実行していることを確認してください。これを head セクションに含めます

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

クロムの右クリックを使用している場合は、コンソールログでエラーを確認し、要素、コンソール、エラーを調べます。

コードは私にはよく見え、同様に機能します。

于 2013-10-18T18:10:31.393 に答える