使用javascript只滚动一个图像进行图像滚动

Image rollover using javascript rolling just one image

本文关键字：滚动 图像 一个 javascript 使用      更新时间：2023-09-26

我使用的是以下代码：

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看起来更整洁

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

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

更好的做法是使用一个函数：

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

<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>
相关文章：