При отображении наведите несколько изображений

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

Я сделал скрипку:

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

---

HTML:

<a href="http://stackoverflow.com/questions//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"); 
} 

---

CSS:

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

---

Вы можете добавить сколько источник изображения, которые вы хотите в массиве ... Вы можете реализовать немного больше ... но он работает ... надеюсь, что это поможет