Question

我一直在尝试使用jQuery构建一个图片幻灯片/轮播，并遇到了colorbox，我认为这非常好，并按照我想要的方式做事。

我在使用他们拥有的ajax方法时，如何构建幻灯片放映。

每个项目我有六张图片，我想从服务器加载，并以幻灯片/轮播的形式运行，就像您点击弹性下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

Answer 1

我建议使用ajax将标记添加到文档中，然后为这些元素分配和打开Colorbox。

一个例子是这样的：

<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>

使用ajax时jQuery图像幻灯片显示轮播

1 个答案: