画像をクリックすると画像スライダー間隔を一時停止する

Question

画像スライダーを作成してw3 cssを追加したので、スライダーで画像をクリックすると画像が上がります。ただし、JavaScriptコードが私はモーダルを持っている必要がある場合は、私のモデルを台無しにスライダーをスライド、私はモーダルを開くときにJavaScriptを一時停止する方法は何ですか？

私のPHPコード：

function getSlideshow($conn) { 
    $sql = "SELECT * FROM status WHERE status_image!='noimage.png' ORDER BY likes DESC LIMIT 8"; 
    $query = mysqli_query($conn, $sql); 
    $i = 0; 
    while ($row = $query->fetch_assoc()) { 
     if($i % 4 == 0 && $i) echo "</div>"; 
     if($i % 4 == 0) echo "<div class='inner'>"; 
     echo " 
     <div class='imagebox'> 
      <img src='images/".$row['status_image']."' onclick='document.getElementById(\"modal".$row['sid']."\").style.display=\"block\"' class='w3-hover-opacity'> 
      </div> 
      <div id='modal".$row['sid']."' class='w3-modal' onclick='this.style.display=\"none\"'> 
    <span class='w3-closebtn w3-hover-green w3-container w3-padding-16 w3-display-topright'>&times;</span> 
    <div class='w3-modal-content w3-animate-zoom'> 
     <img src='images/".$row['status_image']."' style='width:100%'> 
    </div> 
</div> 

     "; 
     $i++; 
    } 
    if($i % 4) echo '</div>'; 
} 

JS/jQueryのコード：

$("#slideshow1h > .inner:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow1h > .inner:first') 
    .fadeOut(1500) 
    .next() 
    .fadeIn(1500) 
    .end() 
    .appendTo('#slideshow1h'); 
}, 6000); 

Answer 1

のsetInterval、すなわち1ので、あなたがclearInterval(1)か、などのインターバル機能を設定することができIDを返します。変数およびclearInterval(myTimer)

$("#slideshow1h > .inner:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow1h > .inner:first') 
    .fadeOut(1500) 
    .next() 
    .fadeIn(1500) 
    .end() 
    .appendTo('#slideshow1h'); 
}, 6000); 

    $('img').on('click', function() { 
    clearInterval(1) 
    } 
); 

永遠にそれを停止します

、