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

你不能只改变值，而不是这个，尝试改变innerhtml，动态插入一个img src

document.getElementById('mageslide').innerHTML='<img src="'+images[counter]+'">'像这样的东西

编辑：假设 mageslide 是一个 div 什么的

于 2012-10-23T11:23:04.533 回答
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

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

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 回答