拥Bootstrap入怀——幻灯片大屏轮播篇

置顶文章：《纯CSS打造银色MacBook Air（完整版）》

上一篇：《拥Bootstrap入怀——导航栏篇》

作者：myvin

写在前面

在该博文中，我依旧结合自己做的那个山水网页来聊一下Bootstrap的使用，网页截图如下：

完整网页的效果和代码可以点击这里查看或者到CodePen上查看。我们再在这里重复一下这个网页要达到的几个主要效果，看过上一篇博文的帅哥美女们可以直接跳过这一段了：

1. 导航栏的登陆、注册按钮点击后弹出登陆、注册modal框，并且登陆、注册窗口可切换，菜单栏为响应式

2. 导航栏中的山水选项可下拉，点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab

3. 幻灯片大屏轮播

4. tab页点击切换

上一篇博文中我们简单聊了聊导航栏的相关内容，想了解或回顾一下的可以点击这里查看上一篇博文。今天我们再聊聊幻灯片大屏轮播这部分。想先目睹下大屏轮播效果实现的可以点击这里查看。

幻灯片大屏轮播

先给出大屏轮播的准完整代码：

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="九寨沟">
              <div class="carousel-caption">
                <h1>九寨沟</h1>
                <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内，是中国第一个以保护自然风景为主要目的的自然保护区，同时，也是中国著名风景名胜区和全国文明风景旅游区示范点。</p>
              </div>
            </div>
            <div class="item">
              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="丽江">
              <div class="carousel-caption">
                <h1>丽江</h1>
                <p>丽江古城，又名“大研古镇”，海拔2,400米（旅游要防内源氧缺乏症），是丽江纳西族自治县的中心城市，是中国历史文化名城之一，世界文化遗产，国家5A级旅游景区，全国文明风景旅游区示范点。</p>
              </div>
            </div>
            <div class="item">
              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="水帘洞">
              <div class="carousel-caption">
                <h1>水帘洞</h1>
                <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处，是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>
              </div>
            </div>
          </div>

          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

其中，该段代码是轮播图下方的三个快速切换的小圆点：

          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

该段代码是轮播图切换的前后两个箭头：

          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

大屏轮播下是带有风景圆图的三段简介：

        <div class="container col-md-10 col-md-offset-1" id="container-produce">
          <div class="row" id="threecols">
            <div class="col-md-4">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_jiuzhaigou.jpg" alt="scenery1" class="img-circle">
              <h1>九寨沟</h1>
              <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内，是中国第一个以保护自然风景为主要目的的自然保护区。</p>
              <a type="button" class="btn btn-default">更多..</a>
            </div>
            <div class="col-md-4">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_lijiang.jpg" alt="scenery2" class="img-circle">
              <h1>丽江</h1>
              <p>丽江古城，又名“大研古镇”，海拔2,400米（旅游要防内源氧缺乏症），是丽江纳西族自治县的中心城市，是中国历史文化名城之一，世界文化遗产。</p>
              <a type="button" class="btn btn-default">更多..</a>
            </div>
            <div class="col-md-4">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_shuiliandong.jpg" alt="scenery3" class="img-circle">
              <h1>水帘洞</h1>
              <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处，风景宜人，是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>
              <a type="button" class="btn btn-default">更多..</a>
            </div>
          </div>

其中，col-md-10类使得下方三段简介总共占10列，col-md-4类使得每段简介分别占4列。

运行以上代码后，我们面对的其实并不是我们想要的效果，轮播图紧挨着下面的三段简介，图片大的有些畸形，而且还有没有填充满的边缘，所以上面说的是准代码，所以我们还需要填补一些代码来完善。

首先我们给carousel类添加代码，限制整个轮播区域的大小，为了视觉上的美观，并和下方的三段简介间隔70px：

      .carousel{
        height:500px;
        margin-bottom: 70px;
      }

同时也给carousel类下的item类添加样式：

      .carousel .item{
        height:500px;
      }

最后为了填充侧边的空白，将轮播的图片百分百占满浏览器宽度：

      .carousel .item img{
        width:100%;
      }

自行添加上这三段代码后运行，貌似没有什么bug，但如果将浏览器缩小缩小再缩小，令人“欣慰”的情况终于出现了：

我们看下面的那段黑白过度的条儿。因为我们给轮播图片容器限制了500px的高度，所以当页面缩小自适应时由于容器500px的高度限制，图片虽然在缩小，容器依然保持不变。明白了原因，当然修改的方法也非常简单，我们可以将height属性替换成max-height属性：

      .carousel .item{
        max-height:500px;
      }

这样，图片容器也能随着自适应。

至于三段简单介绍，大家简单看看就可以。

小了个结

下回接着聊tab切换。

祝大家一切安好。

转载请记得说明作者和出处哦-.-
作者：myvin
原文出处：http://www.cnblogs.com/myvin/p/4730029.html

下一篇：《JS的一些笔记（一）》

置顶文章：《纯CSS打造银色MacBook Air（完整版）》