Question

如果将新内容添加到数据库，我会构建一个自动刷新幻灯片。

假设我单击next按钮显示我的下一个div的内容，从第一个div内容到第三个div内容，现在我的幻灯片显示在第三个div内容上，3秒后我的幻灯片将刷新，我的幻灯片显示回到第一个div内容。

刷新幻灯片后，如何冻结所选div内容的显示？

的index.php

<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajaxSetup({
            cache: false
        });
        setInterval(function () {
            $('.item').load('item.php');
        }, 3000);
    });
</script>
<style type="text/css">
    body {
        background-color: darkturquoise;
    }
</style>
</head>  
<div class="item">
</div>
</html>

item.php

<?php
include 'connect.php';
$sql = mysql_query("SELECT * FROM fm_product ORDER BY p_id desc") or die(mysql_error());
?>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" />
<script type="text/javascript">
    $(document).ready(function () {
        $('.single-item').slick({
            dots: false,
            infinite: true,
            speed: 700,
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            prevArrow: '<button type="button" class="arrowprev" data-role="none" aria-label="Previous" tabindex="0" role="button"><i class="fa fa-chevron-left"></i></button>',
            nextArrow: '<button type="button" class="arrownext" data-role="none" aria-label="Next" tabindex="0" role="button"><i class="fa fa-chevron-right"></i></button>'
        });
    });
</script>
<div class="single-item" style="width: 500px; height: 500px; margin: auto;">
<?php
while($result = mysql_fetch_array($sql)) { ?>
    <div style="background-color: white; height: 200px;"><p style="text-align:center; font-size: 30px;"><?php echo $result['p_id']; ?></p></div>

<?php } ?>
</div>

Answer 1

您可以查看这个可以帮助您的问题：How do I correctly use setInterval and clearInterval to switch between two different functions?

它解释了如何清除间隔。

如果我是你，我会在用户选择DIV后清除间隔，这样它就不会保持自动刷新。现在，在您的代码中，它将在间隔内保持刷新而不会停止。

以下是使用JS

设置和清除间隔的方法

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
 var d = new Date();
 var t = d.toLocaleTimeString();
 document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
 clearInterval(myVar);
}

我可以看到你正在使用jQuery，但如果你使用类似的设置，你应该可以让它工作

<script type="text/javascript">
$(document).ready(function () {
    $.ajaxSetup({
        cache: false
    });
    var myInterval = setInterval(function () {
        $('.item').load('item.php');
    }, 3000);

    function myStopFunction() {
       clearInterval(myVar);
    }

   $(".single-item").click(myStopFunction());
});

您可以看到我在点击“.single-item”时添加了一些代码。我想是你使用的课程，但我不是100％。这就是我有时间来帮助你，希望这会有所帮助，这几乎就是答案

幻灯片放映中{div}的内容

1 个答案: