通过单击更改图像（JavaScript）
所以，我正在为一个运动图形课程做一个项目，他们不教我们JavaScript，但让我们用JavaScript制作网页。我们被告知要使用DreamWeaver，这在大多数情况下都很有效，但我在一个函数上遇到了问题- 我希望能够在单击图像时多次更改图像。我将DW生成的代码放在下面，基本上我希望sun.png在单击时更改为whitedwarf.png，使用MM_swapImage（）方法可以很好地工作。问题是我希望能够点击新的whitedwarf.png并将其更改为第三张图片（planet.png供好奇者使用）通过单击更改图像（JavaScript）,javascript,dreamweaver,Javascript,Dreamweaver,所以，我正在为一个运动图形课程做一个项目，他们不教我们JavaScript，但让我们用JavaScript制作网页。我们被告知要使用DreamWeaver，这在大多数情况下都很有效，但我在一个函数上遇到了问题- 我希望能够在单击图像时多次更改图像。我将DW生成的代码放在下面，基本上我希望sun.png在单击时更改为whitedwarf.png，使用MM_swapImage（）方法可以很好地工作。问题是我希望能够点击新的whitedwarf.png并将其更改为第三张图片（planet.png供好奇
无标题文件
身体{
左边距：100px；
边缘顶部：100px；
背景图像：url（Images/startile.gif）；
}
函数MM_findObj（n，d）{//v4.01
变量p，i，x；如果（！d）d=document；如果（（p=n.indexOf（“？”）>0&&parent.frames.length）{
d=parent.frames[n.substring（p+1）].document；n=n.substring（0，p）；}
如果（！（x=d[n]）&&d.all）x=d.all[n]；对于（i=0；！x&&i如何将图像列表存储在一个数组中，然后在单击时切换图像元素的src，如下所示
i = 0
var images = ['Images/sun.png', 'Images/whitedwarf.png', 'Images/planet.png']
function MM_swapImage() {
if(i >= images.length)
{
img = document.getElementById('Image1')
img.setAttribute('onclick','')
return
}
img = document.getElementById('Image1')
img.setAttribute('src',images[i])
i = i+1
}
使用Javascript
function onClickFunction(){
var imageSRC = document.getElementById("Image1").src = "whitedwarf.png"
}
使用jQuery
function onClickFunction(){
$("#Image1").attr("src", "whitedwarf.png");
}
“使用Dreamweaver”？对Dreamweaver的Phooey。你不需要在Dreamweaver中使用任何东西
从分组在div
或部分中的图像集合开始（如果您使用的是HTML5）
如果禁用CSS或Javascript，图像将正常显示，因此您仍然可以看到所有图像
<div id="imgs">
<img src="img.jpg" alt="My Image 1"/>
<img src="img2.jpg" alt="My Image 2"/>
</div>
然后，当页面加载时，隐藏除一个之外的所有图像，并将单击事件关联到每个图像以隐藏自身并显示下一个图像
var port_imgs, i;
window.onload = function () {
//get all the images in "#imgs"
port_imgs = document.getElementById("imgs").getElementsByTagName("img");
//loop through, hiding them all
for (i = 0; i < port_imgs.length; i++) {
port_imgs[i].style.display = "none";
//wire up the click event and do the magic
port_imgs[i].onclick = (function (k) {
var r = function () {
this.style.display = "none";
if (k >= port_imgs.length) { k = 0 }
port_imgs[k].style.display = "block";
};
return r;
})(i+1);
}
//un-hide (display) the first image so we're all set to go
port_imgs[0].style.display = "block";
}
var-port\u imgs，i；
window.onload=函数（）{
//获取“#imgs”中的所有图像
port_imgs=document.getElementById（“imgs”）.getElementsByTagName（“img”）；
//循环通过，把它们都藏起来
对于（i=0；i=port_imgs.length）{k=0}
端口\ imgs[k].style.display=“block”；
};
返回r；
})（i+1）；
}
//取消隐藏（显示）第一幅图像，这样我们就可以开始了
端口\u imgs[0]。style.display=“block”；
}
你可以在我的网站上看到一个活生生的例子，我使用了完全相同的东西。这里是该功能的一个快速而肮脏的版本，人类实际上可以阅读：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
background-image: url(Images/startile.gif);
}
</style>
<script type="text/javascript">
var Images = {
library: ['Images/sun.png', 'Images/whitedwarf.png', 'Images/planet.png'],
swap: function (element) {
var elementSrc = element.src,
i = 0,
libLength = this.library.length,
src = false;
for(; i < libLength; i++) {
src = this.library[i];
if(src === elementSrc) {
element.setAttribute('src', this.library[(i+1) % libLength]);
break;
}
}
}
}
</script>
</head>
<body>
<img src="Images/sun.png" width="500" height="500" id="Image1" onclick="Images.swap(this)" />
</body>
</html>
下面是一个更优雅的解决方案：
（函数（）{
var Main={
图像：[]，
idx:0，
fillArray:函数（arr）{
if（arr的类型==“对象”）{
if（阵列长度）{
Main.images=Main.images.concat（arr）；
}else Main.images.push（arr）；
}否则{
if（arguments.length）{
for（var i=0；i
使用Main.fillArray（arr）；
用图像填充数组，并使用Main.changeImage（el，n）；
其中el
是其src
将改变的图像元素，n
是要跳过的图像数量（在您的情况下，3）.就像我说的，我们被指示使用DreamWeaver，而不是学习实际的语言，所以我使用我得到的语言。变量parent
应该是什么？@David-这是窗口。parent
属性：@patrikakerstran如果你不熟悉JS，情况会更糟。我会尝试清理一下。我收费我有一定的信心，我只需要修改MM_swapImage（）以支持3个图像，而不是2个图像。我只是不知道怎么做，因为这段代码是由DreamWeaver编写的。我将尝试一下。看看它，我认为这将取代MM_swapImage（）body？是的，如果替换函数并更改图像数组，它应该会工作如果我删除函数名后的I=0，它不会循环吗？（除了循环，我想禁用循环，这非常有效-非常感谢）如果不再循环，您也可以只返回if语句，但这样onclick函数将不再被调用。因此，我不怕看起来很愚蠢-这不会反复给我相同的图像吗？使用JS，我如何更改“whitedwarf.png”通过单击？是的！这是正确的。我只添加了更改它一次的代码。您可以像这样调整图像：function onClickFunction（）{var imageSRC=document.getElementById（“Image1”）.src；if（imageSRC==“sun.png”）{imageSRC=“whitedwarf.png”}else{imageSRC=“sun.png”}所以，你将div标识为“images”，但数组似乎称为“imgs”。有什么区别吗？我感觉很像我漏掉了一块。确认，对不起。我的错，拼写错误。它被称为“portfolio”在我的网站上，这在这里没有意义，所以我更改了它，但我将它更改为两个不同的东西。编辑。我只是尝试了一下，它实际上加载了我的图像（其他建议的解决方案没有），但当我单击时，似乎什么都没有发生。还有什么我需要添加的吗？你检查过我输入的路径是否正确吗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
background-image: url(Images/startile.gif);
}
</style>
<script type="text/javascript">
var Images = {
library: ['Images/sun.png', 'Images/whitedwarf.png', 'Images/planet.png'],
swap: function (element) {
var elementSrc = element.src,
i = 0,
libLength = this.library.length,
src = false;
for(; i < libLength; i++) {
src = this.library[i];
if(src === elementSrc) {
element.setAttribute('src', this.library[(i+1) % libLength]);
break;
}
}
}
}
</script>
</head>
<body>
<img src="Images/sun.png" width="500" height="500" id="Image1" onclick="Images.swap(this)" />
</body>
</html>
swap: function (element) {
var elementSrc = element.src,
i = 0,
libLength = this.library.length,
src = false;
for(; i < libLength; i++) {
src = this.library[i];
if(src === elementSrc) {
if((i+1) >= libLength) {
element.onclick = false;
}
element.setAttribute('src', this.library[(i+1) % libLength]);
break;
}
}
}
(function() {
var Main = {
images: [],
idx: 0,
fillArray: function(arr) {
if (typeof arr == "object") {
if (arr.length) {
Main.images = Main.images.concat(arr);
} else Main.images.push(arr);
} else {
if (arguments.length) {
for (var i = 0; i < arguments.length; i++) {
Main.images.push(arguments[i]);
}
} else return;
}
},
changeImage: function(el, n) {
el.src = Main.images[Main.idx];
Main.idx += n;
}
};
var a = [
'http://bit.ly/sbK2Ub',
'http://bit.ly/yYi5oQ',
'http://bit.ly/4GjHJn'
];
var b = document.getElementById('g'),
c = document.getElementById('e');
Main.fillArray(a);
b.onclick = function() {
Main.changeImage(c, 1);
};
})();