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>