Question

我真的是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>

Answer 1

你不能只改变这个值，改编内部，试图改变内部HTML，动态地插入一个img src

document.getElementById('mageslide').innerHTML='<img src="'+images[counter]+'">'类似这样的事情

编辑：假设mageslide是div或什么

Answer 2

<!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>

Answer 3

您的slide()函数错误，您应该每个时间间隔迭代一个图像，而不是在一个间隔迭代中迭代所有图像，请尝试此固定版本：

function slide(){
   window.counter++;
   if (window.counter >= window.images.length) {
      window.counter = 0;
   }
   document.getElementById('mageslide').src=window.images[window.counter];
}

小图像滑块脚本咳嗽无类型异常错误

3 个答案: