jQuery圖像幻燈片旋轉木馬時使用ajax

我一直在試圖建立一個圖像幻燈片放映/傳送帶使用jQuery，並遇到了colorbox我真的很好，並按我想要的方式做事情。jQuery圖像幻燈片旋轉木馬時使用ajax

我一直堅持使用ajax方法的時候如何構建圖像的幻燈片放映。

我有6個圖像需要從服務器加載，並且以彈出式轉換的方式點擊此page上的第一個鏈接，就像您看到它們一樣以幻燈片/傳送帶的形式運行。

我已經成功地使用ajax將圖像映射到腳本，但我沒有以幻燈片放映結束。我怎樣才能做到這一點？我現在結束了彼此之下的所有圖像，並沒有向前或向後的按鈕等。

你能幫忙嗎？

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'/> 
    <link rel="stylesheet" href="colorbox.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="../jquery.colorbox.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $(".ajax").colorbox(); 
     }); 
    </script> 
</head> 
<body> 
    <p><a class='ajax' href="../content/ajax.html">Outside HTML (Ajax)</a></p> 
</body> 
</html>

ajax.html（拉圖像，並返回到腳本

<div> 
    <img class="gallery" src='/slide/content/ohoopee1.jpg'> 
    <img class="gallery" src='/slide/content/ohoopee2.jpg'> 
    <img class="gallery" src='/slide/content/ohoopee3.jpg'> 
</div>

我只是想不出什麼做的更多。

enter image description here

期望 enter image description here

來源

2014-09-02 jmenezes

我會建議使用AJAX的標記添加到您的文檔，然後分配和開放彩盒這些要素。

一個例子是這樣的：

<div id='pictures' style='display:none'></div> 
<script> 
    $('.ajax').on('click', function(e){ 
     e.preventDefault(); 
     $.ajax(this.href, { 
      success: function(html) { 
       $('#pictures').html(html).find('img').colorbox({href: function(){ 
        return this.src; 
       }, open:true}); 
      } 
     }); 
    }); 
</script>

來源

2014-09-02 23:00:22 Jack

謝謝你，傑克。我在這裏和那裏做了一些調整，然後就開始了。將在一段時間內向您顯示完成的版本。 – jmenezes 2014-09-03 06:05:54

jQuery圖像幻燈片旋轉木馬時使用ajax

回答

相關問題