我正试图用ajax加载一个光滑的幻灯片转盘，这样当按下其中一个单选按钮时，新图像就会通过ajax加载。但我有一个问题，因为当加载新图像时，转盘的所有图像都会在一秒钟内一个接一个地显示。在这个页面上可以看到：http://infrangible-discoun.000webhostapp.com/slideAjax/，按下任何一个无线电按钮。这就是代码。
index.php:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<div id='foto'>
<div class='contenedor2 slideshow2'>
<img src="imagenes/1.jpg">
<img src="imagenes/2.jpg">
<img src="imagenes/3.jpg">
</div>
</div>
<div>
<form id="formOpciones" action="#" method="post">
<label for='color'>Elegir</label>
<input type="radio" class="color" name="color" value="blanco">
<input type="radio" class="color" name="color" value="negro">
<input type="radio" class="color" name="color" value="gris">
<input type="radio" class="color" name="color" value="azul">
</form>
</div>
</body>
<script src="slick2.js"></script>
</html>
ajaxIdProducto.js:
$(document).on('ready',function(){
$(document).on("change",'.color', function(event) {
var $form = $("#formOpciones");
var url1 = "obtenerFoto.php";
{
$.ajax({
type: "POST",
url: url1,
data: $form.serialize(),
success: function(data)
{
$('#foto').html(data);
}
});
}
});
});
obtenerFoto.php：
<html>
<head>
<meta charset="UTF-8">
<title>Obtener Foto</title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<script>
function slickCarousel() {
$('.slideshow2').slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
}
function destroyCarousel() {
if ($('.slideshow2').hasClass('slick-initialized')) {
$('.slideshow2').slick('destroy');
}
}
destroyCarousel();
slickCarousel();
</script>
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
</body>
</html>
slick2.js:
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
也许这是因为当您调用ajax obtenerFoto.php时，一些脚本会重新加载。脚本加载完成后，幻灯片转盘将发生变化。
ajax请求
也许你可以尝试更改obtenerFoto.php文件，如下所示：
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>