这是我的代码,当我一切正常时,直到我尝试执行ajax调用,这是我更改另一个网站的图像数量的情况,在ajax调用其停止自动播放图片之后,有人知道该怎么做?
我尝试的事情:
1.我尝试在更改后进行初始化,并且滑块仍然停止。
2.我尝试将带有宽度的类添加到滑块。
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 - 动态更改后,光滑的滑块不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47833359/