Bootstrap 轮播效果

来源：互联网发布：小米网络诊断怎么关闭编辑：程序博客网时间：2024/06/07 00:09

一、效果

这里写图片描述

可自动轮播也可手动

HTML源码（Bootstrap文档中有）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="css/bootstrap.css" rel="stylesheet">    <link href="x.css" rel="stylesheet">    <script src="js/jquery-3.1.1.min.js"></script>    <script src="js/bootstrap.min.js"></script>    <script src="x.js"></script></head><body><div class="container"><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>    <!-- Wrapper for slides -->    <div class="carousel-inner" role="listbox">        <div class="item active">            <img src="two.jpg" alt="...">            <div class="carousel-caption">                <h3>msdsdasd</h3>                <p>sdsdsdsd</p>            </div>        </div>        <div class="item">            <img src="two.jpg" alt="...">            <div class="carousel-caption">                <h3>msdsdasd</h3>                <p>sdsdsdsd</p>            </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></div></body></html>

CSS自定义源码（更改该区域大小）

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{    height: 500px;    width: 100%;}

三、JS自定义源码

/** * Created by Administrator on 2017/5/5. */$('#carousel-example-generic').on('slide.bs.carousel', function () {    $('.carousel').carousel('cycle');})

1 0