JS中的SI功能

Question

試圖在JS中做一些簡單的事情。比方說，我有兩個圖像，我希望頁面隨機加載每個圖像。我希望兩個圖像被交換，當它被點擊時，它應該改變到另一個圖像。我怎樣才能做到這一點？由於

Answer 1

這裏是普通的JavaScript是隨機加載IMGS數組作爲初始圖像中的一個圖像，然後循環通過不同的圖像的代碼（不使用框架）對每按一次按鈕和的jsfiddle在那裏你可以看到它的工作：http://jsfiddle.net/jfriend00/R7nUa/：

var imgs = [ 
    "http://photos.smugmug.com/photos/344291068_HdnTo-Th.jpg", 
    "http://photos.smugmug.com/photos/344290962_h6JjS-Th.jpg", 
    "http://photos.smugmug.com/photos/344290515_bWVzK-Th.jpg" 
]; 

// select a random image from the img URL array 
function getRandomImage() { 
    var index = Math.floor(Math.random() * imgs.length); 
    return(imgs[index]); 
} 

// create image tag with random image 
function initImage() { 
    var img = new Image(); 
    img.id = "dynImage"; 
    img.src = getRandomImage(); 
    var o = document.getElementById("imageHolder"); 
    o.appendChild(img); 
} 

// given the current URL, get the next URL in the array, 
// wrapping back to beginning if needed 
function nextImage(current) { 
    for (var i = 0; i < imgs.length; i++) { 
     if (imgs[i] == current) { 
      i++; 
      if (i >= imgs.length) { 
       i = 0; 
      } 
      return(i); 
     } 
    } 
    return(0); 
} 

// put a different image into the image tag 
function swapImage() { 
    var o = document.getElementById("dynImage"); 
    var next = nextImage(o.src); 
    o.src = imgs[next]; 
} 

// initialize the button event handler 
function initButton() { 
    var o = document.getElementById("swap"); 
    if (o.addEventListener) { 
     o.addEventListener("click", swapImage); 
    } else { 
     o.attachEvent("onclick", swapImage); 
    } 
} 

initImage(); 
initButton(); 

你可以把儘可能多的網址，進入IMGS陣列，只要你想。你可以在這裏看到這個工作：http://jsfiddle.net/jfriend00/R7nUa/我也添加了預加載，所以當你按下按鈕時，交換是即時的。

Answer 2

你的地方需要這一行腳本

var IMG1 = document.getElementById("IMG1");