如何像幻灯片一样通过onmouseover更改图片？

Question

document.getElementById("myImg").src =（这里我想编写一个代码来获取我的图片中的id并用＆＃34替换SRC; myImg＆＃34; id）

我该怎么办？

Answer 1

DEMO UPDATE:

MARKUP：

<figure>
    <img data-src-1=http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Miley_Cyrus_at_Kids%27_Inaugural_2_cropped_filtered.jpg/640px-Miley_Cyrus_at_Kids%27_Inaugural_2_cropped_filtered.jpg data-src-2=http://upload.wikimedia.org/wikipedia/commons/3/3f/Miley_Cyrus_2008_MTV_VMA.jpg />
</figure>

JAVASCRIPT：

function changeBacground () {
       figure.setAttribute("src", figure.getAttribute("data-src-2")); 
       figure.classList.add("hover");
}
function resetBacground (){
       figure.setAttribute("src", figure.getAttribute("data-src-1"));    
       figure.classList.remove("hover");
}

var figure = document.querySelector("img");

figure.setAttribute("src", figure.getAttribute("data-src-1"));

figure.addEventListener("mouseover", changeBacground,false);
figure.addEventListener("mouseleave", resetBacground,false);

DEMO 1:

figure{
    width:150px;
    height:150px;
    position:relative;
}

img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:red;
}

MARKUP：

<figure>
    <img/>
</figure>

JAVASCRIPT：

function changeBacground () {
       figure.setAttribute("src", imgSrc[1]);              
}
function resetBacground (){
       figure.setAttribute("src", imgSrc[0]);            
}
var imgSrc = ["http://data1.whicdn.com/images/57500972/thumb.png","http://media.tumblr.com/tumblr_lijbquQxMy1qztump.png"],
    figure = document.querySelector("img");

figure.setAttribute("src", imgSrc[0]);
figure.addEventListener("mouseover", changeBacground,false);
figure.addEventListener("mouseleave", resetBacground,false);

使用classList hover

更新大型IMG

function changeBacground () {
       figure.setAttribute("src", imgSrc[1]); 
       figure.classList.add("hover");
}
function resetBacground (){
       figure.setAttribute("src", imgSrc[0]);    
       figure.classList.remove("hover");
}

var imgSrc = ["http://data1.whicdn.com/images/57500972/thumb.png","http://media.tumblr.com/tumblr_lijbquQxMy1qztump.png"],
    figure = document.querySelector("img");

figure.setAttribute("src", imgSrc[0]);
figure.addEventListener("mouseover", changeBacground,false);
figure.addEventListener("mouseleave", resetBacground,false);

风格大图案

img.hover{
    width:200%;
}

DEMO 2:

Answer 2

您要做的是在您想要的元素上添加onmouseover(this)。这样做是为了传递包含该事件的元素。例如：

<img onmouseover="changeImage(this)" src="..." />

this会返回img元素本身。以同样的方式通过说document.getElementById(...)得到一个元素。

注意：您也可以在JavaScript中添加事件处理程序，这样您就不必将它们放在您不想要的HTML中。

现在，对于代码，我们只想将主图像的src更改为我们滚动的元素的src，如下所示：

function changeImage(self) {    
    document.getElementById("myImg").src = self.src;
}

<强> Here is an example