这是我的代码，当我一切正常时，直到我尝试进行ajax调用，在这种情况下，我更改了来自另一个网站的图像数量，在ajax调用其停止自动播放图片后，有人知道如何做到这一点吗？< br/>
我尝试的事情:
1.我尝试在更改后初始化，但 slider 仍然停止。
2.我尝试向 slider 添加宽度类。
3.我尝试在没有功能的情况下初始化。
我尝试完成的主要任务是检查是否有人更改图片，如果有更好的方法可以做到这一点，我会很高兴看到。
<?php
/*take time form file becuse dont wont to use db*/
$my_file = 'file.txt';
$handle = fopen($my_file, 'r+') or die('Cannot open file: '.$my_file);
$data = fread($handle,filesize($my_file));
$data =$data.'000';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>website slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<style>
img {
height: 100vh;
width: 100vw;
}
.imgc{
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<!-- silc that i take from upload folder -->
<div class="your-class " id="exampleImage" >
<?php
$images = glob("upload/*.*");
foreach($images as $image)
{
echo '<div><img class="i" src="./'.$image.'" ></div>';
}
?>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
function sliderInit(){
$('.your-class').not('.slick-initialized').slick({
slidesToShow: 1,
infinite: true,
slidesToScroll: 1,
autoplay: true,
pauseOnHover:true,
autoplaySpeed: <?php echo trim($data); ?>
});
};
/*function for full size*/
function toggleFullscreen(elem) {
elem = elem || document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
/*$('.your-class').slick('slickPlay');*/
sliderInit();
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
sliderInit();
/* $('.your-class').slick('slickPlay');*/
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
/*call function full size when click on img*/
document.getElementById('exampleImage').addEventListener('click', function() {
toggleFullscreen();
});
/*check if there is any change on img myabe add more or delete*/
setInterval(adddata, 20*1000);
function adddata(){
$.ajax({
url :"adddata.php",
success:function(data){
$('#exampleImage').html(data);
setInterval(sliderInit, 1000);
$('.your-class').slick('slickPlay');
}
})
}
});
</script>
</body>
</html>
最佳答案
您需要 .slick("unslick") 然后添加您的内容或使用 .slick("slickRemove") 删除您想要替换的所有幻灯片，然后 .slick("slickAdd") 添加新的。
关于javascript - 动态更改后光滑 slider 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47833359/