logo标签列表

点击切换两张图片

javascriptimage
3
由于这个链接的原因，我将它更改为这样：
  <html>
      <head>
    <script>

    var toggleimage=new Array("p1.gif","p.gif")

    //do not edit the variables below
    var image_1=new Image()
    var image_2=new Image()
    image_1.src=toggleimage[0]
    image_2.src=toggleimage[1]
    var i_image=0

    function testloading() {
        isloaded=true
    }

    function toggle() {
        if (isloaded) {
            document.togglepicture.src=toggleimage[i_image]
        }
        i_image++
        if (i_image>1) {i_image=0}
    }
    onload=testloading
    </script>

        <title>
    </title>
        <meta content="">
        <style></style>
      </head>
      <body>
    <a href="javascript:toggle()"><img name="togglepicture" src="p1.gif" border="0"></a>

    </body>
    </html>

当我点击图片p时，它会显示p1，反之亦然。现在我遇到了问题，图片有一个名称：
 <a href="javascript:toggle()"><img name="togglepicture" src="p1.gif" border="0"></a>

这里会获取名称：

document.togglepicture.src=toggleimage[i_image]

我想要很多图片，所以我认为需要将togglepicture更改为变量，例如：

function toggle(a) {
    if (isloaded) {
        document.a.src=toggleimage[i_image]
    }
    i_image++
    if (i_image>1) {i_image=0}
}

对于输入，例如它将是toggle('nameofimage')，在href中将是类似的内容。
 <a href="javascript:toggle('pic1')">

我没有成功。当我需要点击多张图片时，我该如何使用这个功能？

你在Firebug中遇到了一些错误吗？ - Ankur
5个回答
2
我制作了一个模块化的开关，可以在这里看到：http://jsfiddle.net/Regisc/N7bgz/2/ 使用样例：
<img id="image1" src="http://dummyimage.com/50/f00/fff&text=a" 
     onclick='toogle(this, ["http://dummyimage.com/50/ab0/fff&text=b",
     "http://dummyimage.com/50/ab0/fff&text=c"]);' />
0

我不太确定我理解你的问题。你是在问：

  • 如何编辑函数以允许在两个以上的图像之间切换，还是
  • 如何编辑函数以处理多组切换图像？

在两个以上的图像之间切换

var toggleimage=new Array("p1.gif","p.gif","p2.gif","p3.gif","p4.gif")
var totalImages=4;

function toggle() {
        if (isloaded) {
            document.togglepicture.src=toggleimage[i_image]
        }
        i_image++
        if (i_image>totalImages) {i_image=0}
    }

如何编辑函数以处理多组切换图像？

像这样调用JS函数

<a href="javascript:toggle(this)">

而在你的JS函数中，

var id = div.id;

在 if-else 中使用此代码，以确定调用函数的控件，并相应地使用哪个图像数组。

function toggle(div) 
{   
    var id = div.id;
    if (isloaded) 
    {
        if (id == 'myFirstToggleImageControl')
        {
           document.togglepicture.src=toggleimage[i_image];
        }
        else if (id == 'mySecondToggleImageControl')
        {
            document.togglepicture.src=toggleimageSource2[i_image];
        } 

    }
    i_image++
    if (i_image>1) {i_image=0}
}

注意：您需要为第二个控件使用独立的计数器。因此，可能是i_image1和i_image2。
我只想在两个之间切换，不超过两个，但我想有许多图片，在这些2个之间切换。在您的数组中，我只想要p和p1，不需要更多。 - Nickool
您是在两个控件之间切换相同的图像，还是每个控件都有自己的图像数组进行切换？另外，已更新答案。 - Ayush
0

你不能使用

document.a.src=toggleimage[i_image];

使用代替

document.getElementById(a).src=toggleimage[i_image];

而且你还需要为你的img元素添加一个id。

你的意思是我应该尝试使用ID属性而不是名称，让我试一下。 - Nickool
你可以使用 getElementsByName，但我认为在IE中不起作用。 - Ankur
0

如果toggleimage是一个连续的数组，那么以下类似的代码可以适用于任意数量的图像。

var toggleimage = ["p1.gif","p.gif"];


var toggle = (function() {

    var count = 0;
    var len = toggleimage.length;
    var el = document.getElementsByName('togglepicture')[0]

    return function() {

      if (isloaded) {
        el.src = toggleimage[count++ % len];
      }
   };
}());
0
<html>
<head>
<script>
  // images list (properties name must by equal to id of IMAGE html element)
  var imageList={
    image1: {
      currentIndex:0,
      images:["p1.gif","p.gif"]
    }
  };
  // preloading images using closure (additionaly replace image URL's with image objects)
  (function() {
    for(var p in imageList)if(imageList.hasOwnProperty(p)) {
      for(var i=0;i<imageList[p].images.length;i++) {
        var img=new Image(),src=imageList[p].images[i];
        (imageList[p].images[i]=img).src=src;
      }
    }
  })();

  function toogleImage() {
    var info=imageList[this.id];
    info.currentIndex++;
    if(info.currentIndex===info.images.length)info.currentIndex=0;
    this.src=info.images[info.currentIndex].src;
  }

  // setting start images
  window.onload=function() {
    for(var p in imageList)if(imageList.hasOwnProperty(p)) {
      //try{ 
        document.getElementById(p).src=imageList[p].images[0].src;
      //}
      //catch(ex){}
    }
  }
</script>
</head>
<body>
  <img id="image1" onclick="toogleImage.call(this);"/>
</body>
</html>

http://jsfiddle.net/X4Q2m/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接