2.bootstrap练习笔记-轮播图

bootstrap练习笔记-轮播图

1.要使用轮播图，首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide

设置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’表示默认的属于激活状态

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>

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>

其他不变