02.阿里百秀轮播图制作

Bootstrap

Bootstrap是一个简洁、直观、强悍的前端开发框架，它让web开发更迅速、简单。
它能开发PC端，也能开发移动端
Bootstrap JS插件使用步骤：
1.引入相关js文件
2.复制HTML结构
3.修改对应样式
4.修改相应JS参数
源代码：
链接：https://share.weiyun.com/sIflTdXV 密码：ev78rk

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                  <div class="item active">
                                    <img src="./upload/banner.dpg" alt="...">
                                    <div class="carousel-caption">
                                      1
                                    </div>
                                  </div>
                                  <div class="item">
                                    <img src="./upload/banner1.dpg" alt="...">
                                    <div class="carousel-caption">
                                      2
                                    </div>
                                  </div>
                                  <div class="item">
                                    <img src="./upload/banner2.dpg" alt="...">
                                    <div class="carousel-caption">
                                      3
                                    </div>
                                  </div>
                                  <div class="item">
                                    <img src="./upload/banner3.dpg" alt="...">
                                    <div class="carousel-caption">
                                      4
                                    </div>
                                  </div>
                                </div>
                                <!-- Controls -->
                                <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>
                              <script>
                                  $('.carousel').carousel({
                                    interval: 2000
                                })
                              </script>

.