3.引入bootstrap实现轮播图

此方法可大大缩减代码量，主要在于逐点调试
最好在开发模式下：逐个发现问题，锁定问题，然后修改；再去复制到编辑器中！

1. 引入js

【注意】引入bootstrap文件，必须引入jquery文件

	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

2.html模块

<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 ui-sortable publish-slider" role="listbox" id="publish-copy">
                        <div class="item active">
                            <img src="images/b1.jpg" alt="...">
                            <div class="carousel-caption">
                               1
                            </div>
                        </div>
                        <div class="item">
                            <img src="images/b2.png" alt="...">
                            <div class="carousel-caption">
                             2
                            </div>
                        </div>
                        <div class="item">
                            <img src="images/b3.png" alt="...">
                            <div class="carousel-caption">
                               3
                            </div>
                        </div>
                    </div>
                </div>

3.css模块

.banner {width:100%;overflow:hidden;position:relative;/* background: url("//pc2.gtimg.com/pc/images/f2/17/f217b1ca234356bf39844218cebe135e.jpg") center no-repeat; */background: #0c76ff;display: none;}
.banner li {position:absolute; top:0; left:0; width: 100%; text-align: center}
.banner img {width:100%; _width:1270px; vertical-align: top;}
.b_dot {height:10px;text-align:center; position: absolute; z-index: 1000;
    bottom: 25px!important;
    left: 50%;
    margin-left: -39px;
    _bottom:20px;
}
.b_dot a {display:inline-block; width:23px; height:33px; background:url(../images/b_dot.png) 0 0 no-repeat;}
.b_dot a.on {background-position:-21px 0;}
 .carousel-caption {
            right: 20%;
            left: 52.2%!important;
            padding-bottom: 30px;
            bottom: 170px;
        }
        
        ol,
        ul {
            margin-top: 0;
            margin-bottom: 0px;
        }
        
        #carousel-example-generic {
            height: 440px;
        }
        
        .banner li {}