悬停显示多张图片

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

你可以使用这样的东西 HTML

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

在js文件中

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
}

Answer 2

我做了一个fiddle:

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

html:

<a href="" 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;
}

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

悬停显示多张图片

On hover display multiple images

javascript

jquery

html

css

hover