bootstrap渐变轮播图

最新推荐文章于 2025-05-16 12:58:59 发布

SFwords

最新推荐文章于 2025-05-16 12:58:59 发布

阅读量2.2k

点赞数

分类专栏：学习

学习专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用Bootstrap实现的自定义轮播图效果，通过CSS3过渡实现了平滑的淡入淡出切换效果，并提供了完整的HTML结构及JavaScript初始化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 自定义缩略图</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .carousel-fade .carousel-inner .item {
            opacity: 0;
            -webkit-transition-property: opacity;
            -moz-transition-property: opacity;
            -ms-transition-property: opacity;
            -o-transition-property: opacity;
            transition-property: opacity;
        }

        .carousel-fade .carousel-inner .active {
            opacity: 1;
        }

        .carousel-fade .carousel-inner .active.left,
        .carousel-fade .carousel-inner .active.right {
            left: 0;
            opacity: 0;
        }

        .carousel-fade .carousel-inner .next.left,
        .carousel-fade .carousel-inner .prev.right {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class=" col-lg-4">
    <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
            <li data-target="#carousel" data-slide-to="3"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="./ll/img/0.jpg" width="100%">
            </div>
            <div class="item">
                <img src="./ll/img/1.jpg" width="100%">
            </div>
            <div class="item">
                <img src="./ll/img/2.jpg" width="100%">
            </div>
            <div class="item">
                <img src="./ll/img/3.jpg" width="100%">
            </div>
        </div>
        <a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!-- 轮播（Carousel）导航 -->
</div>

</body>
<script>
    $(function () {
        $('.carousel').carousel({
            interval:3000
        })
    });
</script>

</html>