【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="image/slide1.png" alt="">
            <div class="carousel-caption">this is caption 1</div>
        </div>
        <div class="item"><img src="image/2.jpg" alt=""></div>
        <div class="item"><img src="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');
});