Question

实际上我是新手，我被赋予了减少UI中图像更改之间的时间间隔的任务。

然后我发现它是通过bootstrap图像滑块发生的。然后我搜索了这个但却找不到任何东西。我想减少图像过渡之间的时间间隔。

<div class="carousel slide auto" id="c-slide" >
   <ol class="carousel-indicators out">
      <li data-target="#c-slide" data-slide-to="0" class="active"></li>
      <li data-target="#c-slide" data-slide-to="1" class=""></li>
      <li data-target="#c-slide" data-slide-to="2" class=""></li>
      <li data-target="#c-slide" data-slide-to="3" class=""></li>
      <li data-target="#c-slide" data-slide-to="4" class=""></li>
   </ol>
   <div class="carousel-inner">
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash1.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item active">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash2.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash3.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash4.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash5.jpg" alt="" border="0">
         </p>
      </div>
   </div>
   <a class="left carousel-control" href="#c-slide" data-slide="prev">
   <i class="icon-chevron-left"></i>
   </a>
   <a class="right carousel-control" href="#c-slide" data-slide="next">
   <i class="icon-chevron-right"></i>
   </a>
</div>

Answer 1

这是改变滑块（carousel）的时间间隔的代码，它的jquery代码，你可以改变间隔

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#mycarousel').carousel({
                interval: 3000
            });
        });
    });
</script>

Answer 2

$(document).ready(function () {
    $(function () {
        $('#mycarousel').carousel({
            interval: 2000
        });
    });
});

Answer 3

现在我根据我的要求得到了答案。有两种方法可以执行此任务

使用jQuery

你可以使用像这样的jquery函数来改变间隔。

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#c-slide').carousel({
                interval: 5000 // Here you can specify your time interval
            });
        });
    });
</script>

不使用jQuery

您可以使用data-interval属性直接在html中指定。像这样

<div class="carousel slide auto" id="c-slide" data-interval="2000"> // In this I have set value 2000 miliseconds

没有必要使用jQuery来改变时间间隔，这就是我想要的方式。

您可以阅读这篇文章：http://getbootstrap.com/2.3.2/javascript.html#carousel

减少Bootstrap图像滑块中图像转换之间的时间间隔

3 个答案:

使用jQuery

不使用jQuery