Javascript 用ajax加载光滑的幻灯片转盘_Javascript_Php_Jquery_Carousel_Slick.js

Javascript 用ajax加载光滑的幻灯片转盘

javascript php jquery

Javascript 用ajax加载光滑的幻灯片转盘,javascript,php,jquery,carousel,slick.js,Javascript,Php,Jquery,Carousel,Slick.js,我试图用ajax加载一个光滑的幻灯片转盘，这样当按下其中一个单选按钮时，新的图像就会通过ajax加载。但我有一个问题，因为加载新图像时，旋转木马的所有图像都会一个接一个地显示一秒钟。通过按下任何单选按钮，可以在该页面上看到。这是代码 index.php： <html> <head> <meta charset="UTF-8"> <title></title>

我试图用ajax加载一个光滑的幻灯片转盘，这样当按下其中一个单选按钮时，新的图像就会通过ajax加载。但我有一个问题，因为加载新图像时，旋转木马的所有图像都会一个接一个地显示一秒钟。通过按下任何单选按钮，可以在该页面上看到。这是代码

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>

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>

也许这是因为当您调用ajax obtenerFoto.php时，一些脚本会重新加载。脚本加载完成后，幻灯片旋转木马将发生更改

您可以尝试将文件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>");
?>


$(".slideshow2").slick({
    dots:true,
    arrows: true,
    fade:false,
    autoplay:false,        
        slidesToShow: 1,
        slidesToScroll: 1, 
});

<?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>");
?>