Question

以下是我在网上找到并在我自己的代码中使用的代码：

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>

此代码用于每隔几秒自动在图像之间切换。我已将图像更改为＆＃34; rock＆＃34;，＆＃34; rock2＆＃34;和＆＃34; rock3＆＃34;。我还有2个我要添加的图像。如果不覆盖上面的代码，我怎么能这样做？我是JavaScript的新手。

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

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

Answer 1

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

//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"/>

Answer 2

你应该能够简单地添加一个参数，使用哪个图像集来使用哪个图像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);
}

Answer 3

您可以将函数调用包装在另一个函数中。我在示例中称它为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()">

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

此代码用于每隔几秒自动在图像之间切换。我已将图像更改为＆＃34; rock＆＃34;，＆＃34; rock2＆＃34;和＆＃34; rock3＆＃34;。我还有2个我要添加的图像。如果不覆盖上面的代码，我怎么能这样做？我是JavaScript的新手。

3 个答案: