javascript - 页面中两个不同轮播的两个过渡时间

Question

对于我的网站，一个页面中有两个不同的 Bootstrap 轮播。每个都应该有自己的转换速度。经过长时间的尝试，我找到了通过 javascript 的出路

document.getElementById("image1").style.cssText="position: relative;-webkit-transition: 5s ease-in-out left;-moz-transition: 5s ease-in-out left;-o-transition: 5s ease-in-out left;transition: 5s ease-in-out left;";

对于 html

<div id="carouseltheme" class="carousel slide">
   <div class="carousel-inner" style="height:280px;margin-left:0em;">
       <div id="image1" class=" active item">
          <div class="row-fluid">
              <div class="span12" style="margin-top:1em;margin-left:5.5em">
                "inner-carousel"
              </div>
          </div>                   
       </div>
       <div id="image1" class="item">
          <div class="row-fluid">
              <div class="span12" style="margin-top:1em;margin-left:5.5em">
                  "inner-carousel"                
              </div>
          </div>
       </div>
    </div>
 </div>

过渡速度下降但滑动不连贯。 请帮助我...

Answer 1

做起来很简单。根据需要添加任意数量的轮播，并确保每个轮播的 ID 都是唯一的。然后，使用 jQuery 并为每个轮播设置间隔。独立 ID 还允许您根据需要为每个 ID 应用 CSS。

$('#carouseltheme').carousel({
    interval: 600
})
$('#carouseltheme2').carousel({
    interval: 1500
})
$('#carouseltheme3').carousel({
    interval: 2000
})