25

数秒ごとに画像を変更したい、これが私のコードです：

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>change picture</title>
      <script type = "text/javascript">

    function changeImage()
    {
    var img = document.getElementById("img");
    img.src = images[x];
    x++;

    if(x >= images.length){
        x = 0;
    } 
   var timerid = setInterval(changeImage(), 1000);
}   }
var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";

      </script>
   </head>
   <body onload = "changeImage()">
 <img id="img" src="startpicture.jpg">
   </body>
</html>

私の問題は、最初の写真で立ち往生していることです!

また、前と次のボタンで写真をめくってみたいと思っていましたが、その方法がわかりません。

4

6 に答える 6

29

setTimeout()コメントに投稿したように、との両方を使用する必要はありませんsetInterval()。さらに、構文エラーもあります (余分な 1 つ})。次のようにコードを修正します。

（次/前の画像を強制的に表示する2つの機能を追加するために編集されました）

<!DOCTYPE html>

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "image1.jpg";
          images[1] = "image2.jpg";
          images[2] = "image3.jpg";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="startpicture.jpg"/>
       <button type="button" onclick="displayPreviousImage()">Previous</button>
       <button type="button" onclick="displayNextImage()">Next</button>
   </body>
</html>
于 2012-12-20T16:05:32.813 に答える
3

に変更setTimeout("changeImage()", 30000);しsetInterval("changeImage()", 30000);て削除しvar timerid = setInterval(changeImage, 30000);ます。

于 2012-12-20T16:01:42.897 に答える
2

投稿の現在の編集済みバージョンの時点でsetInterval、各変更の最後に呼び出し、新しい反復ごとに新しい「チェンジャー」を追加します。つまり、最初の実行後、そのうちの 1 つがメモリ内で刻々と変化し、100 回の実行後、100 の異なるチェンジャーが毎秒 100 回イメージを変更し、パフォーマンスを完全に破壊し、混乱を招く結果を生み出します。

「プライミング」する必要があるのはsetInterval1 回だけです。onload関数から削除し、関数を直接呼び出す代わりに内部に配置します。

于 2012-12-20T16:21:02.120 に答える
1

最初に画像をロードし、css 属性を変更してすべての画像を表示できます。

var images = array();
for( url in your_urls_array ){
   var img = document.createElement( "img" );
   //here the image attributes ( width, height, position, etc )
   images.push( img );
}

function player( position )
{
  images[position-1].style.display = "none" //be careful working with the first position
  images[position].style.display = "block";
  //reset position if needed
  timer = setTimeOut( "player( position )", time );
}
于 2014-03-25T20:18:24.960 に答える
0

左の垂直方向のクリック可能なサムネイルを使用して JavaScript で画像を交換する最良の方法

スクリプトファイル: 関数 swapImages() {

    window.onload = function () {
        var img = document.getElementById("img_wrap");
        var imgall = img.getElementsByTagName("img");
        var firstimg = imgall[0]; //first image
        for (var a = 0; a <= imgall.length; a++) {
            setInterval(function () {
                var rand = Math.floor(Math.random() * imgall.length);
                firstimg.src = imgall[rand].src;
            }, 3000);



            imgall[1].onmouseover = function () {
                 //alert("what");
                clearInterval();
                firstimg.src = imgall[1].src;


            }
            imgall[2].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[2].src;
            }
            imgall[3].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[3].src;
            }
            imgall[4].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[4].src;
            }
            imgall[5].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[5].src;
            }
        }

    }


}
于 2014-05-09T19:21:43.933 に答える