Question

现在我正在使用用户界面的物化设计框架。我在物化中使用旋转木马，但旋转木马图像不移动或自动播放。我想设置一些时间间隔来自动播放图像。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

$(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);     
    });

Answer 2

Materialise Carousel没有自动播放功能;我认为它设计为在用户与之交互之前保持静态。

然而，它会显示移动到下一张幻灯片的方法，因此您可以创建一个间隔来将轮播更新到下一张幻灯片，例如。

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

您可能想要为setInterval命名回调，以便您可以清除它，如果您希望用户停止轮播旋转，如果它变得烦人。

在这里快速JSFiddle进行演示。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: