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

for 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
})

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

1 个答案: