• 技术文章 >web前端 >Bootstrap教程

    bootstrap轮播时间在哪里设置

    尚2019-07-31 14:05:39原创3767


    BootStrap轮播图官方代码:

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

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

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

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

    使用JavaScript语句实现:
    官网给出的代码是:

    $('.carousel').carousel({interval: 2000});

    直接使用这个代码无法实现,应在该方法前面加上一个函数表达式,如下:

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

    推荐:bootstrap入门教程

    以上就是bootstrap轮播时间在哪里设置的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:bootstrap按钮样式有哪些 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • bootstrap用哪个版本• jsp中怎么导入bootstrap样式• bootstrap如何设置div边框• bootstrap按钮样式有哪些
    1/1

    PHP中文网