Question

我有5个图像链接，当点击活动页面时，它会在同一个ID中显示另一个图像。到目前为止，我将所有图像更改为一个图像，但我希望它们在单击另一个图像链接时还原为原始图像。我知道我可以使用HTML和CSS来做到这一点，但我想知道如何使用JavaScript来实现此功能。

这是HTML：

<a href="#" onclick="changeImg(1)"><img src="images/tn_wolverine.jpg" id="imgBox1"></a>
<a href="#" onclick="changeImg(2)"><img src="images/tn_wolverine.jpg" id="imgBox2"></a>

这是JavaScript：

function changeImg(ID) {
    var obj = document.getElementById("imgBox"+ID).src="images/tn_wolverine2.jpg";

}

Answer 1

您需要使用标记来记录最新点击图像的索引。当用户单击另一个图像时，使用此索引将图像还原为原始图片。然后用新的标记替换prev index标志。

我写了一个简单的＆＃34;扑克＆＃34;例如：Live DEMO

<强> HTML

<a href="#">
  <img class="poker" src="http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg"/>
</a>
<a href="#">
  <img class="poker" src="http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg"/>
</a>

<强>的JavaScript

(function(){
  var pokers = document.getElementsByClassName("poker"),len=pokers.length,imgs=["http://pica.nipic.com/2007-10-16/20071016115825247_2.jpg","http://img.teapic.com/thumbs/201210/23/141801plfndrdzabzjdaok.jpg.middle.jpg"];
  var defaultImg = "http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg";
  var prevIndex = -1;

  for(var i=0;i<len;i++){
    pokers[i].addEventListener("click",(function(index){
        return function(){
            //no action if user clicked the same poker
            if(prevIndex===index) return;
            if(prevIndex!==-1)pokers[prevIndex].src=defaultImg;
            prevIndex = index;
            this.src=imgs[index];
        };
    })(i));
  };

})();

Javascript图像链接

1 个答案: