Bootstrap开发实战之响应式轮播图

本文主要内容是在导航条的下方做一张轮播图，自动播放最新的重要动态，供大家参考，具体内容如下
一、响应式轮播图

//响应式轮播图

<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;"> <a href="#"><img src="img/slide1.png" alt="第一张"></a></div><div class="item" style="background:#F5E4DC;"> <a href="#"><img src="img/slide2.png" alt="第二张"></a></div><div class="item" style="background:#DE2A2D;"> <a href="#"><img src="img/slide3.png" alt="第三张"></a></div> </div> <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">‹</a> <a href="#myCarousel" data-slide="next" class="carousel-controlright">›</a></div>

//所需要的 jQuery 控制

$（"#myCarousel"）.carousel（{ //设置自动播放/2 秒 interval : 3000,}）;

//调整轮播器箭头位置

$（".carousel-control"）.css（"line-height", $（".carousel-innerimg"）.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"）;}）;

//所需要的 CSS

a:focus { outline: none;}.navbar-brand { padding: 0;}#myCarousel { margin: 50px 0 0 0;}.carousel-inner .item img { margin: 0 auto;}.carousel-control { font-size: 100px;}

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。