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

回答

相关问题