Mouseover Slideshow

2014-09-03 55 views 0 likes

所以我有一个网页上有一个图像（slicedImg_01）。我希望在mouseover上通过一系列6张图片随机生成静态图片。到目前为止，我拥有的将随机生成图片到页面，但它只是创建一个新的图像到页面，并不会取代原始图像。这是我的。此外，我试图避免jquery。（slicedImg_02，slicedImg_03等）Mouseover Slideshow

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);

来源

2014-09-03 swam

回答

我不明白的是创建一个新的图像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; 
}

注意图像名称必须与你进行更换。

来源

2014-09-03 01:55:09 dezhan

Mouseover Slideshow

回答

相关问题