如何更改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 DB生成。 任何帮助表示赞赏。

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>