4

JavaScript を使用して 3 つの画像を循環するバナーを作成しようとしています。
各画像は、変更する前に 10 秒間表示する必要があります。

いくつかのコードを書きましたが、機能しません。最初の画像のままです。思い通りにイメージが変わりません。

コード内の何かを確認して、間違いを指摘していただけますか?

次のようにコードします。

<script type="text/javascript">
    function changeBanner(){
        var img = new array

        img[0] = document.images[0].src
        img[1] = document.images[1].src
        img[2] = document.images[2].src

        var currentimg = img[0]

        if(currentimg == img[0]) {
            currentimg = img[1]
        }

        if(currentimg == img[1]) {
            currentimg = img[2]
        }
    }
</script>

HTMLは次のとおりです。

<body onload="var start=setInterval('changeBanner()', 10000;">
    <div id="wrapper">
        <div>
            <img src="budda.JPG" width="900px" height="300px" />
        </div>
...
4

5 に答える 5

1 
function changeBanner(){
var img = new array

img[0] = document.images[0].src
img[1] = document.images[1].src
img[2] = document.images[2].src

var currentimg = img[0]

今currentimgはimg[0]

if(currentimg == img[0]) {

これは真になります currentimg = img[1] }

今currentImgは価値があるimg[1]

if(currentimg == img[1]) {

これも本当だろう

    currentimg = img[2]
}

currentImgの値を持っていますimg[2]

}

の値を取り除こうcurrentImg

1) ロジックを整理する 2) 特定の DOM オブジェクトをこの新しい値に設定する必要があります。

于 2013-04-14T09:29:36.050 に答える
1

コードにはいくつかの機能上の問題があります。

  • body タグの onload 属性のコードが正しく閉じられていませんでした
  • changeBanner 内のコードは常にすべての if ステートメントを実行し、イメージ サイクルを進めることはありません。

修正に関係なく、コードを少しきれいにすることができます。body タグからインライン スクリプトを削除し、インデックスを使用してセット内の現在の画像を追跡することで if ステートメントの問題を修正します。

あなたのようなHTMLがあり、3つの画像がすべてで始まると仮定しますhidden:

<body>
    <div id="wrapper">
        <div>
            <img src="http://placehold.it/100x150" width="300px" height="150px" hidden />
            <img src="http://placehold.it/200x250" width="300px" height="150px" hidden />
            <img src="http://placehold.it/300x350" width="300px" height="150px" hidden />
        </div>
    </div>
</body>

onloadの属性を使用する必要はありませんbody。

代わりに使用すると、DOM の準備が整い、すべての画像がロードされたwindow.onload後に、イベント後に自動的に呼び出される関数を割り当てることができます。load

できれば、すべてのスクリプト コードを別の.jsファイルに格納し、それへの参照のみを HTML に含めることをお勧めします。ただし、単純にするために、現在のアプローチに近づきました。

その関数内で、次のように変数を設定してから間隔を開始できます。

<script type="text/javascript">
    var currentImageIndex = -1,
        maxImageIndex = 0,
        images = [],
        changeInterval = 1500;

    // prepares relevant variables to cycle throguh images
    var setUp = function() {
        images = document.images;
        maxImageIndex = images.length;
        currentImageIndex = 0;
    };

    // changes the banner currently being displayed
    var changeBanner = function() {
        var i;

        // either re-set the index to 0 if the max length was reached or increase the index by 1
        currentImageIndex = (currentImageIndex >= maxImageIndex - 1) ? 0 : currentImageIndex += 1;

        for (i = 0; i < maxImageIndex; i += 1) {
            images[i].hidden = (i !== currentImageIndex);
        }
    };

    // a function which is triggered following the `load` event
    window.onload = function() {
        setUp();

        images[currentImageIndex].hidden = false; // show the first banner image;

        setInterval(changeBanner, changeInterval); // following a delay, keep changing the banner image by the specified interval
    };
</script>

デモ- 論理的な問題を修正して使用するwindows.onload()

于 2013-04-14T11:14:59.080 に答える
0

コンソールでこれをチェックしてください;）

var imgs=document.images;
function changeBanner(){
    var firstImgSrc = imgs[0].src + "";
    for(var i=0;i<imgs.length-1;i++){
        imgs[i].src=imgs[i+1].src+"";
    }
    imgs[imgs.length-1].src=firstImgSrc; //replace last image src with first one
}
var interval = setInterval(changeBanner, 5000);
于 2013-04-14T09:39:50.223 に答える
0

コード内のsetInterval('changeBanner()', 10000;が正しく閉じられていません。10000 の後に ")" がありません。次のようになります。

setInterval('changeBanner()', 10000);

また、setInterval 関数は、ボディがロードされたときにのみ呼び出されます。そのため、代わりに JavaScript ファイルに関数を追加し、それを html にリンクするだけです。このような：

<script type="text/javascript">
function changeBanner(){
    var img = new array

    img[0] = document.images[0].src
    img[1] = document.images[1].src
    img[2] = document.images[2].src

    var currentimg = img[0]

    if(currentimg == img[0]) {
        currentimg = img[1]
    }

    if(currentimg == img[1]) {
        currentimg = img[2]
    }
}

  setInterval('changeBanner()', 10000);
</script>
于 2013-04-14T09:40:26.390 に答える