3

私は本当にjavascriptの初心者で、小さな画像スライダーを作成したいと思っていました。setIntervalを使用して読み込みを遅らせ、スライダー効果を作成しました。しかし、どういうわけか画像はスライドしておらず、問題はループにあるという気がします。私はすでにいくつかのオプションを調べて、最後のオプションとしてここで尋ねています。前もって感謝します。

<!Doctype html>
  <meta charset="UTF-8">
    <head>

<title>Simple Image Slider</title>
    <script type="text/javascript">
   var counter=0;
    var images=new Array['download.jpg','images (1).jpg','images.jpg'];

       function start(){

    setInterval("slide()",2000);
      }

    function slide(){
    for(counter=0;counter<images.length;counter++)
document.getElementById('mageslide').src=images[counter];
   }
 </script>
<link rel="stylesheet" type="text/css" href="style.css">
     </head>
     <body>
<div id="wrapper">
      <div class="slider" onload="start()">
          <img src="images.jpg" id="mageslide"></img>
       </div>
      **strong text** </div>
      </body>
    </html>
4

3 に答える 3

0 
<!Doctype html>
  <meta charset="UTF-8">
    <head>

<title>Simple Image Slider</title>
    <script type="text/javascript">

   var images=new Array['download.jpg','images (1).jpg','images.jpg'];
   var counter;

       function start(){
           for(counter=0;counter<images.length;counter++) {
               setInterval("slide()",2000);
           }
       }

    function slide(){
       images[counter].onload = function() {
       document.getElementById('mageslide').src=images[counter];
       }
    }
 </script>
<link rel="stylesheet" type="text/css" href="style.css">
     </head>
     <body>
<div id="wrapper">
      <div class="slider" onload="start()">
          <img src="images.jpg" id="mageslide"></img>
       </div>
      **strong text** </div>
      </body>
    </html>
于 2012-10-23T11:26:33.060 に答える
0

これの代わりに値を変更することはできません。動的に img src を挿入して、innerhtml を変更してみてください。

document.getElementById('mageslide').innerHTML='<img src="'+images[counter]+'">'このようなもの

編集：mageslideがdivか何かであると仮定

于 2012-10-23T11:23:04.533 に答える
0

あなたのslide()関数は間違っています。1回の間隔ですべての画像を反復するのではなく、1回の間隔で1つの画像を反復することになっています。この修正バージョンを試してください:

function slide(){
   window.counter++;
   if (window.counter >= window.images.length) {
      window.counter = 0;
   }
   document.getElementById('mageslide').src=window.images[window.counter];
}
于 2012-10-23T11:31:12.380 に答える