【JavaScript】轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

阿航的笔记

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量441

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/zyh0815/article/details/137193140

版权

文章目录

一、具体步骤
- 1.引入插件
- 2.实现效果

一、具体步骤

1.引入插件

引入css文件和js文件
首先创建一个div盒子，将小圆点，图片，左右箭头放入盒子中，并设置轮播播放间隔时间为2秒。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
    <style>
        .focus {
            width: 960px;
            height: 540px;
            margin: 100px auto;
        }

        .carousel,
        .carousel img {
            width: 100%;
            height: 540px !important;
        }
    </style>
</head>

<body>
    <div class="focus">
        <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="./images/lunbo1.png" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./images/lunbo2.png" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./images/lunbo3.png" alt="...">
                    <div class="carousel-caption">
                    </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>
    <script>
        // 每2秒切换一张图片
        $('.carousel').carousel({
            interval: 2000
        })
    </script>
</body>

</html>