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