javascript - 悬停显示多张图片

Question

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

<a href="#" ><img src="http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif" 
onmouseover="this.src=' http://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2013/10/24/101141614-79493992.530x298.jpg?v=1396026765'" 
onmouseout="this.src=' http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif '"  /></a>

我需要的是:当您将鼠标悬停时，其他 10 张图像将开始连续显示，而不是仅显示 1 张(当鼠标悬停时，它们将不断循环)。图像将在 javascript 方法中指定。

许多网站使用它来预览视频；当用户将鼠标悬停在视频上时，会显示视频中的许多拇指以进行预览。如何以最简单高效的方式实现？

Answer 1

我做了一个 fiddle :

http://jsfiddle.net/b92c297t/1/

---

html:

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

---

js:

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

---

CSS:

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

---

您可以在数组中添加您想要的源图像数量...您也可以实现更多...但它正在工作...希望它有所帮助