Javascript 悬停显示多个图像

基本上，如果运行此代码，您将看到如果将鼠标悬停在图像上，将显示另一个图像

---

您可以使用类似的方法 HTML

我拉了一把小提琴：

---

html:

---

您可以在阵列中添加所需的源图像数。。。

---

你也可以实现更多。。。但它正在起作用。。。希望对你有所帮助

也许这会对你有所帮助。。我拉了一把小提琴。。。检查它是否是你所需要的

<a href="#" ><img id="imageSlide" src="http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif"/></a>

var timer = null;
$('#imageSlide').mouseover(function)
{
   var count = 0
   timer = setInterval(function()
   {
       //code to change the image source every time based on the count
       count++;
   },1000);
}

$('#imageSlide').mouseout(function)
{
    clearInterval(timer);
    //code to change the image source
}

<a href="http://stackoverflow.com/questions/28023210/on-hover-display-multiple-images/28025657#28025657" id="myA">
    Image:
</a>

var src_images = [
    "http://www.superwallpapers.com.br/fotos-gratis/novas-fotos-de-paisagens02.jpg",
    "http://wallpaper.ultradownloads.com.br/278810_Papel-de-Parede-Paisagem-da-Suica_1920x1200.jpg",
    "http://sergiorochareporter.com.br/wp-content/uploads/imagens-imagem-paisagem-e03050.jpg",
    "http://www.capaparafacebook.com.br/wp-content/uploads/2012/10/paisagem38-712x264.jpg"
];

var l = src_images.length;

$.each(src_images, function(key, value){
    $("#myA").append("<img src='"+value+"' class='hide' />");
});

$("#myA img:first-child").toggleClass("hide");

var change_images;

$("#myA").hover(function(){
    change_images = setInterval(change, 1000);
}, function(){
    clearInterval(change_images);
});

function change(){
    var img = $("#myA").find("img:not(.hide)");
    img.addClass("hide");
    var nextImg = img.next("img");
    if( img[0] === $("#myA").find("img").last()[0] )
        nextImg = $("#myA").find("img").first();
    nextImg.removeClass("hide");
}

a {
    background-color: #ddf;
    padding: 10px;
    text-decoration: none;
    color: #33f;
}
img {
    height: 200px;
    width: 400px;
}
.hide {
    display: none;
}