0

实际上，我是引导程序的新手，我的任务是减少 UI 中图像更改之间的时间间隔。

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

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

3 回答 3

3

这里是改变slider(carousel)时间间隔的代码，它的jquery代码，你可以改变时间间隔

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#mycarousel').carousel({
                interval: 3000
            });
        });
    });
</script>
于 2013-09-11T09:41:11.567 回答
3 
$(document).ready(function () {
    $(function () {
        $('#mycarousel').carousel({
            interval: 2000
        });
    });
});
于 2013-09-11T09:43:18.857 回答
2

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

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

于 2013-09-11T11:02:20.070 回答