Question

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

＆＃13;

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

＆＃13;

我需要的是：当你悬停鼠标时，其他10个图像将连续显示而不是仅显示1个（当鼠标悬停时，它们将保持循环）。图像将在javascript方法中指定。

许多网站都使用此功能来预览视频;当用户在视频上悬停时，视频中的许多拇指将显示以进行预览。如何才能实现最简单有效的方式？

Answer 1

我做了一个小提琴：

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

您可以在阵列中添加所需的源图像数量... 你也可以实现一点......但是它有效...希望它有所帮助

Answer 2

你可以使用这样的东西 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
}

在悬停时显示多个图像

2 个答案: