bxSlider插件與每個幻燈片移動的ajax調用結合起來，並且每次動態更改圖像的src

我想要做的是一個圖像滑塊，每個幻燈片不會自我重複，而是通過AJAX響應從服務器加載。所以在按下「向前」或「向後」按鈕時，我需要通過AJAX調用一個MySQL函數來更改LIMIT命令的偏移量以搜索前向結果以及AJAX響應顯示新圖像。bxSlider插件與每個幻燈片移動的ajax調用結合起來，並且每次動態更改圖像的src

我的原始代碼是這樣的：

<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數組從舊結果數組更改爲新的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編輯按鈕的第一次點擊此代碼添加圖片，但不會滑動他們。並在下一次點擊它不會添加圖像。

來源

2016-09-24 Donatta

$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不會擺在首位的工作。

希望這會有所幫助。

來源

2016-09-24 04:26:59

bxSlider插件與每個幻燈片移動的ajax調用結合起來，並且每次動態更改圖像的src

回答

相關問題