Как изменить изображения при наведении курсора на jQuery?

Question

У меня такая проблема: внутри моего <div></div> всегда есть 5 изображений, только 1 видно другие 4 скрыты.

<style> 
    #id2, #id3, #id4, #id5 { display: none; } 
</style> 

<div> 
    <img id="id1" src='image.jpg'> 
    <img id="id2" src='image.jpg'> 
    <img id="id3" src='image.jpg'> 
    <img id="id4" src='image.jpg'> 
    <img id="id5" src='image.jpg'> 
</div> 

Моя цель - изменить их на постоянную метку времени (например, 1 секунду) при наведении указателя.

$('document').ready(function(){ 
    $('#1').hover(function(){ 
     // #id1 hide 
     // #id2 show 
     // #id2 hide 
     // #id3 show 
     // #id3 hide 
     // #id4 show 
     // #id4 hide 
     // #id5 show 
     // #id5 hide 
     // #id1 show 
     // and so on... 
    }); 
}); 

Он будет использоваться в качестве предварительного просмотра видео, div и внутренние изображения будут генерироваться из базы данных MySQL. Любая помощь приветствуется.

Answer 1

Вот рабочий пример, основанный на том, что я понял из вашего вопроса:

$('.preview').hover(function() { 
 
    var $that = $(this), 
 
     toggleFunction = function() { 
 
    \t var $visibleImg = $('img:visible', $that), 
 
      $nextImg = $visibleImg.next('img'); 
 
     
 
     if(!$nextImg.length) { 
 
     $nextImg = $('img:first-child', $visibleImg.parent()); 
 
     } 
 
    \t 
 
     $nextImg.show().siblings().hide(); 
 
    }; 
 
\t $that.data('interval', window.setInterval(toggleFunction, 1000)); 
 
    toggleFunction(); 
 
}, function() { 
 
\t window.clearInterval($(this).data('interval')); 
 
});

.preview img { 
 
    display: none; 
 
} 
 

 
.preview img:first-child { 
 
    display: block; 
 
} 
 

 
.preview { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="preview"> 
 
<img src="https://s24.postimg.org/r74b0vcu9/frame_0.gif" /> 
 
<img src="https://s24.postimg.org/a7vclm1mp/frame_15.gif" /> 
 
<img src="https://s24.postimg.org/600kcv075/frame_30.gif" /> 
 
<img src="https://s24.postimg.org/7t82exarl/frame_45.gif" /> 
 
<img src="https://s24.postimg.org/5d6912sox/frame_60.gif" /> 
 
</div>