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返回一个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才能恢复

单击图像

1 个答案: