0

フォルダーには、次の画像w1.j​​pg、w2.jpg ...... w7.jpgがあります。今、htmlページにw1.jpgを表示するためのこのコードがあります

<html>
<body >
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='w1.jpg' style='width:99%;height:99%' alt='[]' />
</div>

</body>
</html>

そして、特定の間隔で画像をw1.jpgからw7.jpgに変更するスクリプトの書き方を知りたいのですが、javascriptでsetInterval関数が使用されていることを知っているので、どうすればよいかを理解していただけますか私のコードでそれを使用しますか?どうもありがとう

4

3 に答える 3

1

画像IDを強制的に定義する必要があります

var i=2;
function change_image()
{
    if(i==8)
    {
        i=1;
    }

    var img="w"+i+'.jpg'
    document.getElementById("img1").src=img;
    i++;
    setTimeout("change_image()",5000);
}

HTMLコード

<img id="img1" src="w1.png" />

javascript関数を呼び出すと、5秒で画像が変更されます

<script>
change_image();
</script>
于 2012-07-14T09:23:02.210 に答える
1

これには background-image スタイルが必要だと思います。これは、バックグラウンドで z-indexed div を作成するよりもはるかに優れた方法です。

次に、JavaScript で CSS を変更します (body 要素の選択に jQuery を使用すると仮定します)。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  var ii = 1;
  setInterval(function(){
    var image = "w" + ii + ".jpg";
    console.log(image);
    $("body").css("background-image", "url('" + image + "')");
    ii++;
  }, 1000);
</script>

もちろん、最後の画像が表示されたら、適切なタイミングで停止する必要があります。

以下のコメントから編集: jQuery を使用したくない場合 (ただし、慣れることをお勧めします)、$symbol で始まる行を次のように変更できます。

document.body.style.backgroundImage = "url('" + image + "')";
于 2012-07-14T09:10:54.983 に答える
0

コードを改善する方法 (インライン css を避けるなど) の詳細には触れませんが、最も簡単な方法は、画像に ID を付けて、これを HTML ページの最後に配置することです。

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img id="change-me" src='w1.jpg' style='width:99%;height:99%' alt='[]' />
 </div>
<script>
var
    images = [ "w1.jpg", "w2.jpg", "w3.jpg" ] //the list of images
  , imgToCHange = document.getElementById( 'change-me' )
  , interval = 1000 //in ms
  ;

setInterval( function(){
  images.unshift( images.pop() );
  imgToCHange.src = images[0];
 }, interval );

</script>
</body>
</html>
于 2012-07-14T09:13:06.633 に答える