Bootstrap carousel轮播图插件 简洁版

HTML部分  （只需修改图片路径，增删图片数量都可，尺寸统一）

 <!--引用bootstrap的轮播图-->    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">        <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="images/list-1.png" alt="..." width="100%" height="100%">            </div>            <div class="item">                <img src="images/list-2.png" alt="..."  width="100%" height="100%">            </div>            <div class="item">                <img src="images/list-3.png" alt="..." width="100%" height="100%">            </div>        </div>    </div>    <!--引用bootstrap的轮播插件-->

CSS部分

.carousel {    position: relative;}.carousel-inner {    position: relative;    width: 100%;    overflow: hidden;}.carousel-inner > .item {    position: relative;    display: none;    -webkit-transition: .6s ease-in-out left;    -o-transition: .6s ease-in-out left;    transition: .6s ease-in-out left;}.carousel-inner > .item > img,.carousel-inner > .item > a > img {    line-height: 1;}@media all and (transform-3d), (-webkit-transform-3d) {    .carousel-inner > .item {        -webkit-transition: -webkit-transform .6s ease-in-out;        -o-transition:      -o-transform .6s ease-in-out;        transition:         transform .6s ease-in-out;        -webkit-backface-visibility: hidden;        backface-visibility: hidden;        -webkit-perspective: 1000px;        perspective: 1000px;    }    .carousel-inner > .item.next,    .carousel-inner > .item.active.right {        left: 0;        -webkit-transform: translate3d(100%, 0, 0);        transform: translate3d(100%, 0, 0);    }    .carousel-inner > .item.prev,    .carousel-inner > .item.active.left {        left: 0;        -webkit-transform: translate3d(-100%, 0, 0);        transform: translate3d(-100%, 0, 0);    }    .carousel-inner > .item.next.left,    .carousel-inner > .item.prev.right,    .carousel-inner > .item.active {        left: 0;        -webkit-transform: translate3d(0, 0, 0);        transform: translate3d(0, 0, 0);    }}.carousel-inner > .active,.carousel-inner > .next,.carousel-inner > .prev {    display: block;}.carousel-inner > .active {    left: 0;}.carousel-inner > .next,.carousel-inner > .prev {    position: absolute;    top: 0;    width: 100%;}.carousel-inner > .next {    left: 100%;}.carousel-inner > .prev {    left: -100%;}.carousel-inner > .next.left,.carousel-inner > .prev.right {    left: 0;}.carousel-inner > .active.left {    left: -100%;}.carousel-inner > .active.right {    left: 100%;}.carousel-control {    position: absolute;    top: 0;    bottom: 0;    left: 0;    width: 15%;    font-size: 20px;    color: #fff;    text-align: center;    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);    background-color: rgba(0, 0, 0, 0);    filter: alpha(opacity=50);    opacity: .5;}.carousel-control.left {    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);    background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));    background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);    background-repeat: repeat-x;}.carousel-control.right {    right: 0;    left: auto;    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);    background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));    background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);    background-repeat: repeat-x;}.carousel-control:hover,.carousel-control:focus {    color: #fff;    text-decoration: none;    filter: alpha(opacity=90);    outline: 0;    opacity: .9;}.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right {    position: absolute;    top: 50%;    z-index: 5;    display: inline-block;    margin-top: -10px;}.carousel-control .icon-prev,.carousel-control .glyphicon-chevron-left {    left: 50%;    margin-left: -10px;}.carousel-control .icon-next,.carousel-control .glyphicon-chevron-right {    right: 50%;    margin-right: -10px;}.carousel-control .icon-prev,.carousel-control .icon-next {    width: 20px;    height: 20px;    font-family: serif;    line-height: 1;}.carousel-control .icon-prev:before {    content: '\2039';}.carousel-control .icon-next:before {    content: '\203a';}.carousel-indicators {    position: absolute;    bottom: 10px;    left: 50%;    z-index: 15;    width: 60%;    padding-left: 0;    margin-left: -30%;    text-align: center;    list-style: none;}.carousel-indicators li {    display: inline-block;    width: 10px;    height: 10px;    margin: 1px;    text-indent: -999px;    cursor: pointer;    background-color: #000 \9;    background-color: rgba(0, 0, 0, 0);    border: 1px solid #fff;    border-radius: 10px;}.carousel-indicators .active {    width: 12px;    height: 12px;    margin: 0;    background-color: #fff;}.carousel-caption {    position: absolute;    right: 15%;    bottom: 20px;    left: 15%;    z-index: 10;    padding-top: 20px;    padding-bottom: 20px;    color: #fff;    text-align: center;    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);}.carousel-caption .btn {    text-shadow: none;}@media screen and (min-width: 768px) {    .carousel-control .glyphicon-chevron-left,    .carousel-control .glyphicon-chevron-right,    .carousel-control .icon-prev,    .carousel-control .icon-next {        width: 30px;        height: 30px;        margin-top: -10px;        font-size: 30px;    }    .carousel-control .glyphicon-chevron-left,    .carousel-control .icon-prev {        margin-left: -10px;    }    .carousel-control .glyphicon-chevron-right,    .carousel-control .icon-next {        margin-right: -10px;    }    .carousel-caption {        right: 20%;        left: 20%;        padding-bottom: 30px;    }    .carousel-indicators {        bottom: 20px;    }}
JS部分(jQuery和3.3版本的bootstrap压缩版js)
<script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>
使用方法：将html部分复制到插入到需要轮播的地方，将css部分复制，建立一个css文件，然后
引用这个css文件即可，js部分先引用jquery，然后引用bootstrap压缩版，放在最下面</body>前。