如何在 Javascript 中为 3 个不同的图像提供 2 个相同的功能？答案

【问题标题】：How to have 2 same functions in Javascript for 3 different images?如何在 Javascript 中为 3 个不同的图像提供 2 个相同的功能？
【发布时间】：2015-06-27 13:02:14
【问题描述】：

以下是我在网上从某人那里找到并在自己的代码中使用的代码：

var image=new Array("/Users/ghanimbakhit/Desktop/HTML Project/images/rock.jpg",
"/Users/ghanimbakhit/Desktop/HTML Project/images/rock2.jpg",
"/Users/ghanimbakhit/Desktop/HTML Project/images/rock3.jpg");


var timeout={};
function stopIt(){
    clearTimeout(timeout);
}
function changeimage(dvX){
    var dvi=document.getElementById(dvX);
    if(!dvi.count || dvi.count == image.length )
    dvi.count=0;
    dvi.src=image[dvi.count];
    dvi.alt=image[dvi.count];
    dvi.count=dvi.count+1;
    timeout=setTimeout('changeimage("'+dvX+'")',3500);
}

HTML代码如下：

<body onload="changeimage('changer')">
<div style="position:absolute;top: 600px"  ><img width="350" src="t1 alt="Rock Climbing"  id="changer"/></div>
</body>

此代码用于每隔几秒在图像之间自动切换。我已将图像更改为“rock”、“rock2”和“rock3”。我还有 2 张图片要添加。在不覆盖上述代码的情况下如何做到这一点？我是 JavaScript 新手。

如果您需要更多信息，请通知我。我必须在 3 小时内提交。谢谢！

更新：我需要在其他地方为 2 个不同的图像分别对齐并放置在 HTML 代码中的相同功能。这意味着我希望此功能适用于网页中的其他图像。

【问题讨论】：

只需在顶部的image 数组中添加您想要的两个图像的链接。
不，不是这样，让我说得更具体一些。对于 2 个不同的图像，我在其他地方需要相同的功能，分别对齐并放置在 HTML 代码中。
哦...这更有意义！谢谢。我将编写一个代码 sn-p 来说明如何做到这一点。
您具体要问什么？您的问题表明您想向函数中添加 2 个图像，Noble 正确指出，只需将其添加到顶部的数组实例化中。但是，您的更新表明您想在其他地方使用此功能，并使用不同的图像。在这种情况下，这一切都应该被包装在一个函数中，并且图像可以作为参数或各种其他技术传入。无论哪种方式，这些答案都可以简单地在 SO 的其他地方或通过 Google 找到。
好吧，如果我不知道如何解释，我很抱歉，我在谷歌上找了它，但我找不到。我告诉 Noble 正确的部分是在其他地方使用不同图像的此功能。正如你提到的，我不知道该怎么做，我是 Javascript 新手，很抱歉我的不专业，但我会尽量保持简单。

标签： javascript jquery html css image

【解决方案1】：

您应该能够简单地为哪个图像集添加一个参数来使用哪个图像，就像这样http://jsfiddle.net/zxmbbc31/1/

HTML：

<body onload="changeimage('changer', image); changeimage('changer2', image2); changeimage('changer3', image3)">
     <div style="position:absolute;top: 600px"  >
          <img width="350" src="t1" alt="Rock Climbing"  id="changer"/>
          <img width="350" src="t1" alt="Rock Climbing"  id="changer2"/>
         <img width="350" src="t1" alt="Rock Climbing"  id="changer3"/>
      </div>
</body>

Javascript：

  var image=new Array("/rock.jpg","/images/rock2.jpg", "rock3.jpg");
  var image2=new Array("/Users//rock.jpg","/rock2.jpg","images/rock3.jpg");
  var image3=new Array("Project/images/rock.jpg","rock2.jpg","rock3.jpg");

 var timeout={};
 function stopIt(){
 clearTimeout(timeout);
}
function changeimage(dvX, images){
    var dvi=document.getElementById(dvX);
    if(!dvi.count || dvi.count == images.length )
    dvi.count=0;
    dvi.src=images[dvi.count];
    dvi.alt=images[dvi.count];
    dvi.count=dvi.count+1;
    timeout=setTimeout('changeimage("'+dvX+',' +images+")',3500);
}

【讨论】：

谢谢大家，非常感谢。
我尝试应用它，但图像现在没有改变。

【解决方案2】：

您可以将函数调用包装在另一个函数中。我在示例中将其称为 init。然后你可以为 init 中的所有图像调用 changeimage。

var image = [
    "/Users/ghanimbakhit/Desktop/HTML Project/images/rock.jpg",
    "/Users/ghanimbakhit/Desktop/HTML Project/images/rock2.jpg",
    "/Users/ghanimbakhit/Desktop/HTML Project/images/rock3.jpg"
];


var timeout = {};

function stopIt () {
    clearTimeout(timeout);
}

function changeimage (dvX) {
    var dvi = document.getElementById(dvX);

    if(dvi.count === undefined || dvi.count == image.length ) {
        dvi.count = 0;
    }

    dvi.src = image[dvi.count];
    dvi.alt = image[dvi.count];
    dvi.count = dvi.count + 1;

    timeout = setTimeout(function () {
        changeimage(dvX);
    }, 3500);
}

function init () {
    changeimage('changer');
    changeimage('changer2');
    changeimage('changer3');
}

那么对于您的 HMTL：

<body onload="init()">

【讨论】：

【解决方案3】：

为此，为要交替的每组图像设置两个不同的数组和两个不同的<img> 元素。然后，使用数组和<img> 元素调用changeImage() 函数两次。

//We have two different arrays within an array for two different sets.
var images = [["http://www.mspaintadventures.com/images/v3_banner2_store1.gif", "http://blog.codinghorror.com/assets/images/favicon.ico?v=bdb986f48f", "http://www.mspaintadventures.com/images/v3_banner_store2.gif"], ["http://cdn.sstatic.net/stackoverflow/img/polyglot-404.png", "http://www.mspaintadventures.com/images/PSbooktwobanner.gif"]];


//We have two different timeouts for two different sets.
var timeouts = [null, null];
function stopIt(i){
    clearTimeout(timeouts[i]);
}
function changeimage(id, i){
    //We pass in both the id and the images
    //because both of these will change in our function calls.
    var image = images[i];
     console.log(image);
    var dvi=document.getElementById(id);
    if(!dvi.count || dvi.count == image.length )
        dvi.count=0;
    dvi.src=image[dvi.count];
    dvi.alt=image[dvi.count];
    dvi.count=dvi.count+1;
    //We use a function instead of a string
    //because using a string with setTimeout() is _always_ a bad idea.
    timeouts[i] = setTimeout(function() {
        changeimage(id, i)
    }, 3500);
}

//It is a much better idea to put the event in JavaScript instead of inline HTML
document.addEventListener("DOMContentLoaded", function() {
    changeimage("changer1", 0);
    changeimage("changer2", 1);
});

<!-- We do not set the src attributes of the images
     because we will set them in JavaScript-->
<img width="350" alt="Rock Climbing" id="changer1"/>
<img width="350" alt="Rock Climbing" id="changer2"/>

【讨论】：