在物化设计中设置自动播放轮播的间隔

Question

现在我正在为用户界面使用物化设计框架。我在实体化中使用轮播，但轮播图像不会移动或自动播放。我想设置一些时间间隔来自动播放图像。

      $('.carousel').carousel({
            dist:0,
            shift:0,
            padding:20, 
           interval:100
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>


 <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>

Answer 1

您使用的是非常旧的 jquery 版本，将其更改为较新的版本并且此示例有效，如果您希望转换可以自动进行，您可以使用一个间隔并转到下一个使用轮播方法。

$(document).ready(function(){
        $('.carousel').carousel({dist:0});
        window.setInterval(function(){$('.carousel').carousel('next')},500)
     });

div.carousel a.carousel-item{
  width: 50px;  
}
img{
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
           
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
        <div class="carousel">
            <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
            <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
            <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
            <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
            <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
        </div>

Answer 2

Materialise Carousel 没有自动播放功能；我认为它旨在保持静态，直到用户与之交互。

然而，它确实公开了移动到下一张幻灯片的方法，因此您可以创建一个间隔来将轮播更新到下一张幻灯片，例如

setInterval(function(){
  $('.carousel').carousel('next');
}, 1000);

您可能想为 setInterval 的回调命名，这样如果您希望用户在旋转木马变得烦人时停止旋转，您可以清除它。

下面是一个快速的 JSFiddle 演示。

Answer 3

$(document).ready(function(){
    var carousel_interval = 1000;
    $('.carousel').carousel();
    var int;
    function run(){
        int = setInterval(function()
        { 
            $('.carousel').carousel('next');
        }, carousel_interval);
    }
    function stop(){
    clearInterval(int);
    }
    $('.carousel').hover(stop, run);     
    });

在物化设计中设置自动播放轮播的间隔

Set interval for autoplay carousel in materialize design

html

javascript

css

jquery

materialize