bootstrap轮播太慢怎么设置


本文摘自PHP中文网,作者(*-*)浩,侵删。

bootstrap是一个非常好用的css框架,里面集成了各种页面常用到的排版和特效,图片轮播就是其中之一啦

要修改图片轮播的时间间隔,当然直接修改源码是不推荐的啦,方法其实很简单。(推荐学习:Bootstrap视频教程)

BootStrap轮播图官方代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!--data-ride设置图片切换方式为滑动 -->

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- 设置轮播图的数量和顺序-->

  <!--data-target的值应与上面的id值对应 -->

  <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>

 

  <!-- 要展示的图片信息 -->

  <div class="carousel-inner" role="listbox">

    <div class="item active">

      <img src="..." alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    <div class="item">

      <img src="..." alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    ...

  </div>

 

  <!-- 控制图标 -->

  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

实现轮播图时间间隔改变的两种方式

在data-ride后面加上一个属性data-interval=“millisecond”,其中,millisecond为需要设置的毫秒数,如下:

1

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

使用JavaScript语句实现:

官网给出的代码是:

1

2

3

$(function(){

    $('#carousel-example-generic').carousel({interval:1000});

});

更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

以上就是bootstrap轮播太慢怎么设置的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

bootstrap如何设置表格单选按钮

bootstrap有什么用处

bootstrap中如何设置表单的宽高

一招搞定bootstrap警告框

bootstrap缓存怎么解决

学习bootstrap需要什么基础

bootstrap导航栏怎么居中

bootstrap里面有什么东西

bootstrap中怎么设置按钮位置

bootstrap模态框如何提交表单

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...