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;
});
}
}
なぜ、あなたは 'playpause'を繰り返し呼び出すのでしょうか? – Joseph