用 ajax 加载一个光滑的幻灯片轮播

如何解决用 ajax 加载一个光滑的幻灯片轮播

我正在尝试使用 ajax 加载光滑的幻灯片轮播，以便在按下其中一个单选按钮时，通过 ajax 加载新图像。但是我有一个问题，因为在加载新图像时，轮播的所有图像都显示在另一个之上一秒钟。可以在此页面上看到：http://infrangible-discoun.000webhostapp.com/slideAjax/，通过按任意单选按钮。这是代码。

index.PHP:

signed_integral<__int128>

ajaxIdProducto.js：

<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:

$(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);           
           }
       });  
    }    
});   
});

slick2.js：

<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 时，某些脚本会重新加载。脚本加载完成后，幻灯片轮播会发生变化。

ajax request

也许您可以尝试像这样更改文件 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>");
?>