项目实战--响应式轮播图[2]

一．响应式轮播图

<div id="myCarousel" class="carousel slide">

         <ol class="carousel-indicators">

                   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                   <li data-target="#myCarousel" data-slide-to="1"></li>

                   <li data-target="#myCarousel" data-slide-to="2"></li>

         </ol>

         <div class="carousel-inner">

                   <div class="item active" style="background:#223240"> //背景色取色于图片边框

                            <img src="img/slide1.png" alt="第一张">

                   </div>

                   <div class="item" style="background:#F5E4DC;">

                            <img src="img/slide2.png" alt="第二张">

                   </div>

                   <div class="item" style="background:#DE2A2D;">

                            <img src="img/slide3.png" alt="第三张">

                   </div>

         </div>

         <a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>

         <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>

</div>

 

         //轮播自动播放

         $('#myCarousel').carousel({

                   //自动4秒播放

                   interval : 4000,

         });

 

         //设置垂直居中(不能直接设行高，如果屏蔽缩小，箭头会掉下来)

         $('.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');

//当前图片的行高是有值的，非当前图片行高是0，行高取非0，即当前图片

         });

处置居中的另一种方式

/*.carousel-control {

         font-size: 100px;

}*/

 //设置垂直居中

         // $('.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');

         // });

         <a href="#myCarousel" data-slide="prev" class="carousel-control left">

                   <span class="glyphicon glyphicon-chevron-left"></span>

         </a>

         <a href="#myCarousel" data-slide="next" class="carousel-control right">

                   <span class="glyphicon glyphicon-chevron-right"></span>

         </a>