【Bootstrap学习笔记】12.轮播插件

#十八、轮播插件

##学习内容

轮播插件
轮播插件-框架结构
轮播插件-基本结构
轮播插件-自动播放
轮播插件-JS方式实现自动播放
轮播插件-方法
轮播插件-事件

● 轮播插件(Carousel)

1.轮播插件就是将几张同等大小的图片，按顺序依次播放
2.注：插件不会自动对图片做缩放拉抻处理，要提前校准图片

● 轮播插件-框架结构

<!--框架结构-->
<div><!--索引按钮，以三张图为例-->ol>li*3<!--图片，以三张图为例-->div>div*3>img<!--左、右两个按钮-->a*2
</div>

● 轮播插件-基本结构

在框架结构基础上一步步实现功能
1.最外围的div增加id，如id="mc"和class样式div.carousel.slide
2.ol部分是索引按钮，以三张图为例，即需要三个按钮。ol设置样式.carousel-indicators，li设置data-target="#mc"和data-slide.to="0"属性
3.div部分放置图片。外围div设置样式div.carousel-inner，内层div设置样式div.item，第一个内层div还需设置.active用于默认显示第一张图
4.a部分用于上翻/下翻两个按钮。设置样式a.carousel-control.left和a.carousel-control.right，设置属性href="#mc"和data-slide="prev/next"
5.上翻/下翻按钮有两种样式，一种是«和»，这种样式会顶格；
另一种是<span class="glyphicon glyphicon-chevron-left"></span>，这个样式更好看
6.如果需显示标题，可在div.item下增加div.carousel-caption

<div id="mc" class="carousel slide" style="width:900px"><ol class="carousel-indicators"><li data-target="#mc" data-slide-to="0"></li><li data-target="#mc" data-slide-to="1"></li><li data-target="#mc" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><img src="data:image/slide1.png" alt=""><div class="carousel-caption">this is caption 1</div></div><div class="item"><img src="data:image/2.jpg" alt=""></div><div class="item"><img src="data:image/slide3.png" alt=""></div></div><a class="carousel-control left" data-slide="prev" href="#mc"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="carousel-control right" data-slide="next" href="#mc">&raquo;</a>
</div>

● 轮播插件-自动播放

div.carousel.slide增加属性
data-ride="carousel" 自动播放
data-interval="2000" 间隔事件
data-wrap="false" 是否循环播放

● 轮播插件-JS方式实现自动播放

<script>   //自动播放，间隔约5秒$('#mc').carousel();
</script><script>//键值对形式设置自动播放$('#mc').carousel({//设置间隔事件interval:2000,//设置是否循环wrap:false,//停止方式，值好像无法更改pause:'hover',});
</script>

● 轮播插件-方法

$('#mc').carousel('cycle') 开始播放
$('#mc').carousel('pause') 暂停播放
$('#mc').carousel(number) 跳转到索引号
$('#mc').carousel('prev') 上翻
$('#mc').carousel('next') 下翻

<button class="btn btn-default cycle">cycle</button>
<button class="btn btn-default pause">pause</button>
<button class="btn btn-default goto3">goto3</button>
<button class="btn btn-default prev">prev</button>
<button class="btn btn-default next">next</button><script> $('.cycle').on('click',function(){$('#mc').carousel('cycle');})$('.pause').on('click',function(){$('#mc').carousel('pause');});//注：这里number是索引号，从0开始$('.goto3').on('click',function(){$('#mc').carousel(2);});$('.prev').on('click',function(){$('#mc').carousel('prev');});$('.next').on('click',function(){$('#mc').carousel('next');});
</script>

● 轮播插件-事件

slide.bs.carousel 滑动时触发
slid.bs.carousel 滑动完成后触发

$('#mc').on('slide.bs.carousel',function(){alert('slide');
});

【Bootstrap学习笔记】12.轮播插件相关推荐

Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件学习要点: 1.轮播插件本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
html图片展示插件,12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精 ...
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
【轮播图】使用bootstrap轮播插件（Carousel）
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.内容是足够灵活的,可以是图像.内嵌框架.视频或者其他想要放置的任何类型的内容. 源代码 <!DOCTYP ...
html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
Bootstrap轮播插件，代码步骤
轮播插件: Bootstrap轮播插件是一种灵活的响应式的向站点添加滑块的方式轮播的内容可以是,图像,内嵌框架,视频或者其他想要放置的任何类型的内容使用该插件必须引入bootstrap.js或者压 ...

【Bootstrap学习笔记】12.轮播插件

● 轮播插件(Carousel)

● 轮播插件-框架结构

● 轮播插件-基本结构

● 轮播插件-自动播放

● 轮播插件-JS方式实现自动播放

● 轮播插件-方法

● 轮播插件-事件

【Bootstrap学习笔记】12.轮播插件相关推荐

最新文章

热门文章