Question

所以，我正在研究一个动画制作类的项目，他们教我们没有JavaScript但是让我们用JavaScript制作一个网页。我们被告知使用DreamWeaver，这对大多数事情都有效，但我特别遇到一个函数问题 -

我希望能够在单击时多次更改图像。我把DW生成的代码放在下面，基本上我希望sun.png在点击时更改为whitedwarf.png，并且使用MM_swapImage（）方法可以正常工作。问题是，我希望能够点击新的whitedwarf.png并将其更改为第3张图片（planet.png为好奇的人）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
background-image: url(Images/startile.gif);
}
</style>
<script type="text/javascript">
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;     x.src=a[i+2];}
}
</script>
</head>

<body>
<img src="Images/sun.png" width="500" height="500" id="Image1" onclick="MM_swapImage('Image1','','Images/whitedwarf.png',0)" />
</body>
</html>

我提供了尽可能多的相关信息，我对JS并不熟悉，虽然我已经用Java编写了很多东西，所以我并不完全是文盲。

Answer 1

如何将图像列表存储在数组中，然后在点击时切换图像元素的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
}

Answer 2

使用Javascript

function onClickFunction(){

    var imageSRC = document.getElementById("Image1").src = "whitedwarf.png"
}

使用jQuery

function onClickFunction(){
    $("#Image1").attr("src", "whitedwarf.png");
}

Answer 3

“使用Dreamweaver”？ Dreamweaver上的Phooey。你不需要stinkin Dreamweaver。

从在div或section内分组的一组图片开始（如果您使用的是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";
    }

你可以在website上看到一个实际的例子，我在那里采用了完全相同的东西。

Answer 4

以下是该功能的快速和脏版本，实际上对人类可读：

<!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>

使用此代码，您可以通过将其网址添加到Images.library - 数组中来添加任意数量的图像。我提供了一个jsFiddle（HTML，JS和CSS游乐场）作为概念证明。

您可以在此处查看演示：http://jsfiddle.net/L6DW9/

编辑我还在HTML页面的缺失部分进行了编辑，以防你复制整件事。

EDIT2 ：要跳过环绕，请将swap: function () {[...]}更改为：

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;
        }
    }
}

Answer 5

这是一个更优雅的解决方案：

http://jsfiddle.net/H5fPT/

(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);
    };
})();

使用Main.fillArray(arr);在图片中填充图片并使用Main.changeImage(el, n);其中el是src将更改的图片元素，n是你想跳过的图像（在你的情况下，3）。

通过单击更改图像（JavaScript）

5 个答案: