Question

我尝试使用chocolat js创建一个包含图像的全屏幻灯片。

入门文档首先说：

<div class="chocolat-parent" data-chocolat-title="set title">
    <a class="chocolat-image" href="series/1.jpg" title="caption image 1">
        <img class="chocolat-open" width="100" src="series/1.jpg" />
    </a>
    <a class="chocolat-image" href="series/2.jpg" title="caption image 2">
        <img width="100" src="series/2.jpg" />
    </a>
    <a class="chocolat-image" href="series/3.jpg" title="caption image 3">
        <img width="100" src="series/3.jpg"/>
    </a>
</div>

我的javascript是这样的：

$(document).ready(function(){
    $('.chocolat-parent').Chocolat({
        loop: true,
        imageSize: 'cover',
    });
});

但是如何让它自动打开并循环？

Answer 1

请查看以下代码进行演示。

有关详情，请查看documentation

这就是你需要的

$(document).ready(function(){
    var instance = $('.chocolat-parent').Chocolat({
    loop: true,
    fullScreen : true,
    imageSize: 'cover',
    }).data('chocolat');
    instance.api().open();
    window.setInterval(function(){
        instance.api().next();
    },2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/css/chocolat.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/js/jquery.chocolat.min.js"></script>

<div class="chocolat-parent" data-chocolat-title="set title">
    <a class="chocolat-image" href="https://i.stack.imgur.com/C5xFh.jpg" title="caption image 1">
        <img class="chocolat-open" width="100" src="https://i.stack.imgur.com/C5xFh.jpg" />
    </a>
    <a class="chocolat-image" href="https://i.stack.imgur.com/kbOvd.jpg" title="caption image 2">
        <img width="100" src="https://i.stack.imgur.com/kbOvd.jpg" />
    </a>
    <a class="chocolat-image" href="https://i.stack.imgur.com/jjOFl.jpg" title="caption image 3">
        <img width="100" src="https://i.stack.imgur.com/jjOFl.jpg"/>
    </a>
</div>

Answer 2

你可以像这样使用

      <script>

        $(document).ready(function(){

    var instance = $('#example1').Chocolat({
    loop: true,
      imageSize: 'cover',
    }).data('chocolat');
  instance.api().open();
            setInterval(function(){  instance.api().next();}, 3000);

});
    </script>

与chocolat js循环的全屏图像

2 个答案: