マウスのホバーで停止する画像スライダーの作成方法は？

これは私のコードマウスのホバーで停止する画像スライダーの作成方法は？

<body> 
    <div id="slideshow">    
     <div> 
      <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/> 
     </div> 
     <div> 
      <img src="assets/images/banner1.jpg" width="995" height="421" alt=""/> 
     </div> 
     <div> 
      <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/> 
     </div> 
     <div> 
      <img src="assets/images/banner1.jpg" width="995" height="421" alt=""/> 
     </div> 
     </div> 
<script> 
    $("#slideshow > div:gt(0)").hide(); 
     setInterval(function() { 
     $('#slideshow > div:first') 
      .fadeOut(1000) 
      .next() 
      .fadeIn(1000) 
      .end() 
      .appendTo('#slideshow'); 
    }, 3000); 
</script> 
</body>

出典

2016-04-18 Nnnn

では、jQueryの、次の試してみて、それが働いされているかどうか教えてください？

$(document).ready(function() { 

    var timer; 

    $("#slideshow > div:gt(0)").hide(); 

    $("#slideshow") 
     .mouseenter(function() { 
      if (timer) { clearInterval(timer) } 
     }) 
     .mouseleave(function() { 
      timer = setInterval(function() { 
       $("#slideshow > div:first") 
        .fadeOut(1000) 
        .next() 
        .fadeIn(1000) 
        .end() 
        .appendTo("#slideshow"); 
      }, 2000); 
     }) 
     .mouseleave(); 


});

方法のsetInterval（）はclearInterval（）を使用して現在のインターバル/タイムアウトをクリアするために使用することができますINTERVALIDを返します。そして、ここでは、まず、イメージがのが名前のanimate_slider（として持つその機能をsupposteてみましょうスライディング行うための役割として機能havigとしてreformattdする必要がありますあなたのコードでそれを行うのは難しいの一種である作業FIDDLE DEMO

出典

2016-04-18 07:14:16

である）、ウェルにマウスオーバーで停止するだけで、次のようにclearInterval on timeパラメータを設定する必要があります。

出典

2016-04-18 07:14:58 PacMan

ありがとうございます。それは動作し始めます.. – Nnnn

マウスのホバーで停止する画像スライダーの作成方法は？

答えて

関連する問題