在幻燈片中刷新div的內容

-1

如果將新內容添加到數據庫中，我已經構建了自動刷新幻燈片。在幻燈片中刷新div的內容

假設我點擊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>

來源

2016-03-15 Vintage Beef

可能重複[我如何正確使用setInterval和clearInterval在兩個不同的函數之間切換？]（http：// stackoverflow。 com/questions/10485385 /如何正確使用setinterval和clearinterval-to-switch-between-two-diffe） – mikedidthis

你可以看看這個問題，這將有助於你：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()); 
});

你可以看到，我添加了一些代碼，當你點擊「單項目」我想火是你使用的類，但我不是100％。這是所有我有時間來幫助你，希望這可以幫助，它幾乎是答案

來源

2016-03-15 09:36:49 Peadar

你是對的我的代碼還沒有停止刷新，你有任何示例演示像我的問題？ –

在鏈接的問題中有一些示例，但我已更新我的答案以提供更多信息 – Peadar

非常感謝。 –

在幻燈片中刷新div的內容

回答

相關問題