引導旋轉木馬事件Listiner無法使用JS使用下面的代碼來更新超時工作

Question

我試圖調整轉盤幻燈片之間的時間間隔：

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

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"); 
 
});

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