javascript - 在一组图片中仅使用javascript更改src

我对JavaScript真的很陌生。我新单击了一个图像，该图像也会更改SRC以及其他图像。

这是代码：

<a href="#pduno"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pduno.png" width="13" height="11" /></a>
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a>
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a>

pduno.png是“活动”图像，而pddos.png是“无效”图像。

我有3张图片pduno-pddos-pddos

当我单击2个pddos中的一个时，它将更改为pduno，而将pduno中的一个更改为pddos。我的意思是，只有一张带有pduno的图像，其余的都是pddos。

我正在用它来创建一个滚动画廊。 pduno可以显示正在显示的画廊。

最佳答案

我将为此使用jQuery库（因为您需要使用一些不太简单的函数）

您可以包括编写以下代码的代码（无需下载任何内容）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />

然后，我会这样做：

<a href="#pddos"><img class="pdimg" src="img/pduno.png" width="13" height="11" /></a>
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a>
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a>

在HTML中，我删除了所有脚本，并将它们移到此处：

<script>
$('.pdimg').click(function(){ //This registers the function with the click event
    $('.pdimg').attr('src', 'img/pddos.png'); //This resets the image to pddos
    $(this).attr('src', 'img/pddos.png'); //This sets the image to uno,
                             // "this" will be the img that you clicked on.
}
</script>

关于javascript - 在一组图片中仅使用javascript更改src，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10167555/