1. 首頁
  2. 問答
  3. Mouseover Slideshow

Mouseover Slideshow

2014-09-03 54 views
0

所以我有一個網頁上有一個圖像（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

回答

0

我不明白的是創建一個新的圖像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

相關問題

 相關問題