javascript - 单击图像时暂停照片 slider 间隔

Question

我制作了一个照片 slider ，并添加了一些 w3 css，所以当我点击 slider 中的图像时，我得到了一个照片模态。但是当 javascript 代码想要滑动 slider 时，如果我必须打开模态，当我打开模态时，他们有什么方法可以暂停 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 返回一个 ID，即 1，因此您可以 clearInterval(1) 或者您可以将间隔函数设置为变量和 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)
   }
);

这将永远停止它，您必须再次调用 setInterval 才能恢复