bxSlider插件与每个幻灯片移动的ajax调用相结合，并且每次动态更改图像的src

Question

我想要做的是一个图像滑块，每个幻灯片不会重复，而是通过AJAX响应从服务器加载。 因此，在按下“向前”或“向后”按钮时，我需要通过AJAX调用MySQL函数来更改LIMIT命令的偏移量以搜索前向结果，并且在AJAX响应时显示新图像。

我的原始代码是这样的：

<script src="script/jquery.bxslider.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $('.slider1').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
})
</script>

<div class="slider1">
          <?php 
            $query = "SELECT * FROM vid LIMIT 4";
            $result = mysqli_query($conn,$query);
            if(!$result){echo 'error with query';}
            while ($row = mysqli_fetch_assoc($result)) { ?>
              <div class="slide">
                <img class='img_res'src='<?php $src = "images/"; echo  $src.$row['namev_id'].".png";?>' alt="Bacn">
              </div>
            <?php } ?>                
       </div>

我的猜测是点击向前或向后按钮来附加AJAX调用，并在响应时更改图像的src：

$('.forward_btn').click(function(){
    $.ajax({url: "load_results.php", success: function(result){
       $("#slider1").append("<div><img src='result'></div>");
}});

但当然这不起作用，因为我需要将$ row数组从旧结果数组更改为new - AJAX结果。 插件的工作方式是它反复重复图像，同时我需要每次按下幻灯片按钮来更改图像src - 所以更改$ row数组。 在这里，我几乎陷入困境。 我现在主要担心 - 我没有完全得到的是如果调用返回一个数组，如何从AJAX调用的结果传递新的src。

我的问题是 - 如何动态地将$ row数组从旧的MySQL结果更改为新的AJAX结果？ 有什么方法可以做到吗？

到目前为止，我所取得的成就是：

   $('.bx-next').click(function(e){
   e.preventDefault();
     $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>');
    $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>');
    $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>');
   $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png">   </div>');
   slider.reloadSlider();
   });

首次单击bnext按钮时，此代码会添加图像，但不会滑动它们。 并且在下一次点击时它不会添加图像。

Answer 1

$row是服务器端的php变量。

click事件处理程序在客户端（浏览器）中执行。

你需要某种协议来在两者之间进行通信，但这会很复杂。

我认为你的代码几乎就是标记。 我已经在表面上检查了bxSlider文档，但在更新滑块内容时找不到任何内容。 那么你的代码中发生了什么，就是你告诉bxSlider使用你从数据库中获得的前4个滑块元素。 然后在滑块上单击，您将向html添加新内容，但滑块永远不会了解它们。 所以我建议如下：

$('.forward_btn').click(function(){
    $.ajax({url: "load_results.php", success: function(result){
       $("#slider1")
         .append("<div><img src='result'></div>")
         .bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
         });;
      }
    });

这样bxSlider也知道使用新的img。 每次单击时，滑块将增加1。 如果要将滑块保持为4，则可以删除<div class="slider1">的第一个子<div class="slider1"> 。 请参阅此问题以了解如何执行此操作： 如何删除元素的第一个子元素，但在Jquery中由$（this）引用？

可能是bxSlider将你的html更改为无法识别，但是你有一个不同的问题，因为你的.append不会起作用。

希望这可以帮助。