Question

我正在使用此代码：

function roll(id,images){
    var myImage = document.getElementById(id);
    for(i = 0; i<5; i++){
        setTimeout(myImage.src = images[i],2000);
    }
}
function resetter(id,image){
    var myImage = document.getElementById(id);
    myImage.src = image;
}

进行图像翻转

这是HTML：

        <div class="thumb">
    <div class="image">
        <a href="video_page.php?id=61" title="">
            <img src="original/12.jpg" id="videoid61" onMouseOver="roll('videoid61',['original/6.jpg','original/1.jpg','original/2.jpg','original/3.jpg','original/4.jpg']);" onMouseOut="resetter('videoid61','original/12.jpg');"/><br>
        </a>
    </div>
    <div class="dur"></div>
</div>

        <div class="thumb">
    <div class="image">
        <a href="video_page.php?id=66" title="">
            <img src="original/111.jpg" id="videoid66" onMouseOver="roll('videoid66',['original/112.jpg','original/113.jpg','original/114.jpg','original/115.jpg','original/116.jpg']);" onMouseOut="resetter('videoid66','original/111.jpg');"/><br>
        </a>
    </div>
    <div class="dur"></div>
</div>

我有很多缩略图。我想要旋转所有图像。但这让我只旋转一张图像。无论如何在没有$() JQuery的情况下解决这个问题？因为，我有很多缩略图，如果你有任何简单的方法来管理代码我也可以使用JQuery。但是，简单的javascript看起来更整洁

Answer 1

您显然正在设置超时，但语法不正确。尝试

setTimeout("myImage.src = images[i]",2000);

更好的做法是使用函数：

setTimeout(function() {
    myImage.src = images[i];
}, 2000);

Answer 2

<html>
  <head>
        <title>Rollover</title>
  </head>
  <body>
      <p>
         <img id="img1" src="picture.jpg " alt="sample picture" height="86"
              width="44" onmouseover = "show('img1' , 'img_girl.jpg');" 
              onmouseout = "show('img1' , 'picture.jpg');" />
     </p>
    <script>
         function show(imgId , URL){
             var img = window.document.getElementById(imgId);
             img.setAttribute("src" , URL);
         }
    </script>
  </body>
</html>

图像翻转使用javascript滚动一个图像

2 个答案: