最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

bootstrap轮播时间在哪里设置

来源:动视网 责编:小采 时间:2020-11-27 15:01:03
文档

bootstrap轮播时间在哪里设置

bootstrap轮播时间在哪里设置:BootStrap轮播图官方代码:<!--data-ride设置图片切换方式为滑动 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> &l
推荐度:
导读bootstrap轮播时间在哪里设置:BootStrap轮播图官方代码:<!--data-ride设置图片切换方式为滑动 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> &l


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轮播时间在哪里设置

bootstrap轮播时间在哪里设置:BootStrap轮播图官方代码:<!--data-ride设置图片切换方式为滑动 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> &l
推荐度:
标签: 设置 时间 轮播
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top