2016-05-03 9 views
1

これは画像スライダです。 スライダーの上にカーソルを合わせると、すべて正常です。再生/一時停止ボタンが表示されます。スライダ表示エリアの外に移動すると、再生と一時停止ボタンが消えます。 しかし、再生/一時停止画像そのものの上にマウスを置くと、再生/一時停止の画像がちらつきます。ホバリング時にsetIntervalで点滅する画像

ちらつきを止める方法はありますか?

スライダにカーソルを合わせると、画像の再生と一時停止が表示されます。演奏をクリックすると一時停止に変わり、その逆もあります。再生し、自動でスライドすると

コードスニペットをオフに一時停止:

HTML

<section> 
      <img src="img/arrow-left.png" alt="Previous" id="prev"> 
      <div id="outsideSlider"> 
       <img alt="play" src="img/play.png" id="play"> 
       <img alt="pause" src="img/pause.png" id="pause"> 

       <div id="slider"> 
        <div class="slide"> 
         <div class="sliderText"> 
          <h2>Hark! Stay alert</h2> 
          <p>Some text</p> 
         </div> 
         <img src="img/slide1.jpg" alt="Slide 1"> 
        </div> 
       </div> 
    </section> 

jQueryの

setInterval(function(){ 
    playpause(); 
},1); 

//function to switch between play button and pause button on click 

function playpause(){ 
    if($('#pause').hasClass('activeButton')) 
    { 
     $('#slider,#play,#pause').click(function(){ 
      $('#pause').removeClass('activeButton'); 
      $('#play').addClass('activeButton'); 
      $('#pause').hide(); 
      $('#play').show(); 
      autoswitch=false; 
     }); 
    } 
    //When play is clicked, activate pause button 
else if($('#play').hasClass('activeButton')) 
    { 
     $('#slider,#play,#pause').click(function(){ 
      $('#play').removeClass('activeButton'); 
      $('#pause').addClass('activeButton'); 
      $('#play').hide(); 
      $('#pause').show(); 
      autoswitch=true; 
     }); 
    } 
} 
+0

なぜ、あなたは 'playpause'を繰り返し呼び出すのでしょうか? – Joseph

答えて

1

私はこの答えを見つけました。

上記のコードに問題はありませんでした。 それは、この機能にあった:

function showhide() 
{ 
    $('.slide,#play,#pause').mouseenter(function(){ 
     tt=setInterval(function(){ 
      $('.activeButton').show(); 
     },1); 
    }).mouseleave(function(){ 
     clearInterval(tt); 
     $('.activeButton').hide(); 
    }); 
} 

私がしたsetInterval出来上がり外.SHOW()関数を移動しました!ちらつきがありません

関連する問題