bootstrap练习笔记-轮播图
1.要使用轮播图，首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide文章来源地址:https://www.yii666.com/article/756197.html
设置id是标识这个div是轮播图，等到li下面的按钮来指向它，当然可以用其他id
Class carousel标识这个是一个轮播图样式 slide表示轮播图的左右两遍有滑动效果
ol>li*3表示有三个图片
ol.carousel-indicators表示是一个指示到轮播图的列表，每一个li有一个与之对应的轮播图
li data-target=”#myCarousel”表示作用的目标是id=”myCarousel”的容器
data-slide-to=’0’标识对应下标为0的图片，也就是第一张图片
class=’active’表示默认的属于激活状态网址:yii666.com
2.div#myCarousel>div.carousel-inner 表示这里的存放轮播图的图片
div.carousel-inner>div*3 是轮播图对应的三个图片
div.item表示这是一个轮播图中的一个小项
3.<a href=”#myCarsousel” data-slide=”prev” class=’carousel-control left’>&lsaqup;</a>文章地址https://www.yii666.com/article/756197.html
href=”#myCarsousel” 表示作用的id
data-slide=”prev” 表示向上一页滑动
.carousel-control 标识这是一个轮播图控制器
left表示左滑动，与data-slide结合，向左滑动就去查看上一张图片
4.jquery设置自动播放
5.并且在页面改变大小的时候，两个左右滑动的小图标自动垂直居中
<!--轮播图-->
<div id="myCaroysel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCaroysel" data-slide-to="0" class="active"></li>
<li data-target="#myCaroysel" data-slide-to="1"></li>
<li data-target="#myCaroysel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background:#223240;">
<img src="img/slide1.png" style=”margin:0 auto;”alt="1">
</div>
<div class="item" style="background:#F5E4DC;">
<img src="img/slide2.png" style=”margin:0 auto;”alt="2">
</div>
<div class="item" style="background:#DE2A2D;">
<img src="img/slide3.png" style=”margin:0 auto;”alt="3">
</div>
</div>
<a href="#myCaroysel" style=”font-size:100px;” data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCaroysel" style=”font-size:100px;” data-slide="next" class="carousel-control right">›</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
//自动播放
$('#myCaroysel').carousel({
interval:2000,
});
//动态获取图片高度，并且设置垂直居中
$('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
//当浏览器窗口大小改变的时候
$(window).resize(function () {
var $height = $('.carousel-inner img').eq(0).height()||
$('.carousel-inner img').eq(1).height()||
$('.carousel-inner img').eq(2).height();
//动态获取图片高度，并且设置垂直居中
$('.carousel-control').css('line-height',$height+'px');
});
});
</script>
但是在BS中，当我们在上一下加入图标
<span class="glyphicon glyphicon-chevron-left"></span>
下一页加入图标
<span class="glyphicon glyphicon-chevron-right"></span>
他就自动识别并响应式居中
代码如下
<a href="#myCaroysel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCaroysel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
//自动播放
$('#myCaroysel').carousel({
interval:2000,
});
});
</script>
其他不变