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

document.getElementById（“myImg”）.src=

（这里我想编写一个代码，从我的图片中获取id，并用“myImg”id替换src）

我该怎么办

标记：

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

<figure>
    <img/>
</figure>

标记：

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

<figure>
    <img/>
</figure>

使用

classList hover

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

大形象的风格

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

---

您要做的是在所需的元素上添加

onmouseover（this）

。它所做的是传递包含该事件的元素。例如：

img.hover{
    width:200%;
}

---

这是否在从onmouseover调用的函数中？我认为您应该使用不透明或显示隐藏之类的方式来执行此操作。你也可以用css动画来做。你到底面临什么问题？你不知道在document.getElementById（“myImg”）.src=之后放什么吗？是的，但我想写一个代码，给出我鼠标悬停在上面的图片的id，就像这个document.getElementById（$（this）.id）。src我不想使用悬停。我正在使用多个图像，例如，您想将鼠标移到一张图片上，这样您就可以在ok检查中看到大尺寸的图片，使用Javascript更新这些代码是正确的，但我不想使用像imgSrc@Kamal这样的数组。先生，您想用什么？

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

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