Question

我尝试使用js调整轮播幻灯片之间的间隔，使用以下代码更新超时：

**var t;
var start = $('#carousel').find('.active').attr('data-interval');
t = setTimeout("$('#carousel').carousel({interval: 3500});", start-3500);
$('#carousel').on('slid.bs.carousel', function () {   
     clearTimeout(t);  

     var duration = $(this).find('.active').attr('data-interval');
        alert("slide event");

     $('#carousel').carousel('pause');
     t = setTimeout("$('#carousel').carousel();", duration-3500);
})**

As you can see, I even added and alert to let me know the code was invoked, but it never is and I don't know why.

I even added the following code in an attempt to confirm the slide.bs.carousel event but to no avail:

**$('#carousel').bind('slide.bs.carousel', function (e) {
    console.log('slide event!');
    alert("invoked");   
});**


The html looks like this:

**
<div id="carousel" class="carousel slide">

    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item" data-interval="3000">
            <img src="image2" />
        </div>
        <div class="item" data-interval="6000">
            <img src="image3" />
        </div>
        <div class="item" data-interval="9000">
            <img src="image1" />
        </div>
    </div>
</div>**

任何人都可以告诉我这是错的吗？

谢谢....

瑞克

Answer 1

启动（启动）轮播后，重置间隔的正确方法应为：

$('#carousel').data("bs.carousel").options.interval =  500;

＆＃13;

var t;
var start = $('#carousel').find('.active').attr('data-interval');
t = setTimeout(function() {
  $('#carousel').carousel({
    interval: 3500
  });
}, start - 3500);

var counter = 0;
$('#carousel').on('slide.bs.carousel', function(e) {

  counter++;
  console.log('interval -> ' + counter*500);
  $('#carousel').data("bs.carousel").options.interval = counter * 500;
})

$('#carousel').bind('slide.bs.carousel', function(e) {
  console.log('slide event!');
  // alert("invoked");
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <img src="http://via.placeholder.com/100x100" />
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/200x200" />
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/300x300" />
    </div>
  </div>
</div>

＆＃13;

Bootstrap Carousel事件列表器不工作

1 个答案: