Question

所以我有一个网页上有一张图片（slicesImg_01）。我希望在mouseover上通过一系列6张图片随机播放静态图片。到目前为止，我所拥有的将随机生成图片到页面，但它只是为页面创建一个新图像，并没有替换原始图像。这就是我所拥有的。另外，我试图避免jquery。（slicedImg_02，slicesImg_03等）

HTML：

<body>
<div >
<img  onmouseover="imgSwitch()" src="slicedImg_01.gif" height="50" width="50" id =  "pic">
</img>
</div>
</body>

JS：函数imgSwitch（）{

 var img = new Array("slicedImg_01.gif", "slicedImg_02.gif", "slicedImg_03.gif",  "slicedImg_04.gif", "slicedImg_05.gif", "slicedImg_06.gif");
    var i;
    //var pic = ""
    for (i = 0; i < 7; i++)
        var rand = img[Math.floor(Math.random() * img.length)];
        var image = document.getElementById("pic").src
         image = new Image();
        image.src = rand;
        document.body.appendChild(image);

Answer 1

我不明白的是创建新图片的行image = new Image();。下面的代码应该用随机选择的新图像替换当前图像：

function imgSwitch(){
  var img = new Array("1.jpg", "2.jpg", "3.jpg",  "4.jpg", "5.jpg", "6.jpg");
  var rand = img[Math.floor(Math.random() * img.length)];
  document.getElementById("pic").src = rand;
}

请注意，图片名称需要替换为您的。

鼠标悬停幻灯片

1 个答案: