Question

我正在实现一个页面，当页面加载时，幻灯片开始。幻灯片的图片来自后端（数据库）。每张图片都有自己的计时器，因为有些图片包含内容，而有些图片只有标题或徽标。目前，我为每张图片设置了相同的时间间隔，但现在我想根据数据库中的值设置时间间隔。

这是我现在使用相同时间间隔的代码：

的index.php

<section class='images'>
    <? foreach($model->slides as $slide){ ?>
        <div class='image'>
            <img class='image' src="<?= $slide->image ?.'/pictures/'.$slides->image : '' ?>">
        </div>
    <? } ?>
</section>

<script type="text/javascript">
    $(document).ready(function(){
      $('.images').slick({
            slidesToShow: 1,
            autoplay: true,
            autoplaySpeed: 10000,
      });
    });
</script>

在 indexController.php （控制器）

中

public function index(Array $params = []){
    $this->view->slides = \Model\Slide_Picture::getList(['orderBy'=>"image_order asc"]);
    $this->loadView($this->view);
}

My table 'slide_images' consist of 3 fields: image, image_order and timer。

如前所述，此代码可帮助我以10秒的时间间隔获取图像幻灯片，但现在我想为每个图像设置不同的图像。例如，数据库中有3个图像，图1的计时器值为30s，图2的值为10s，图3的值为40s。这可能吗？如果是，我怎样才能实现它。提前致谢。感谢帮助。

Answer 1

您需要为每个图像添加时间到数据库，然后一旦这样做，您就可以返回时间值，并在数据属性中使用它。（似乎你已经完成了timer）

然后利用afterChange事件获取值，然后动态更改autoplaySpeed速度。

以下是一个示例，您需要将其集成。

＆＃13;

$(document).ready(function() {
  var images = $('.images');

  images.slick({
    slidesToShow: 1,
    autoplay: true,
    autoplaySpeed: 1000,
  }).on("afterChange", function(e, slick) {
    var slideTime = $('div[data-slick-index="' + slick.currentSlide + '"]').data("timer");
    images.slick("setOption", "autoplaySpeed", slideTime);
  });
});

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<section class='images'>
  <div class='image' data-timer="2000">
    <img class='image' src="http://via.placeholder.com/350x150">
  </div>
  <div class='image' data-timer="100">
    <img class='image' src="http://via.placeholder.com/350x150">
  </div>
  <div class='image' data-timer="1000">
    <img class='image' src="http://via.placeholder.com/350x150">
  </div>
  <div class='image' data-timer="3000">
    <img class='image' src="http://via.placeholder.com/350x150">
  </div>
  <div class='image' data-timer="1000">
    <img class='image' src="http://via.placeholder.com/350x150">
  </div>
</section>

＆＃13;

运行代码段以查看其实际效果。

所以你的循环看起来像：

<section class="images">
<?php foreach ($model->slides as $slide): ?>
    <div class="image"<?= !empty($slide->timer) ? ' data-timer="'.$slide->timer.'"' : null ?>>
        <img class="image" src="<?= $slide->image ? '/pictures/'.$slides->image : null ?>">
    </div>
<?php endforeach ?>
</section>

如何为滑块中的每张图片设置不同的定时器？

1 个答案: