Question

我想要做的是一张图片滑块，每张幻灯片不会重复，而是通过AJAX响应从服务器加载。所以在按钮上前进＆＃39;或者＆＃39;落后＆＃39;被按下我需要通过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">的第一个子项。有关如何执行此操作，请参阅此问题：How to delete the first child of an element but referenced by $(this) in Jquery?

bxSlider可能会将您的html更改为无法识别，但之后您遇到了另一个问题，因为您的.append首先无法工作。

希望这有帮助。

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

1 个答案: