bootstrap初体验,实现轮播图效果

最新推荐文章于 2024-04-20 16:13:23 发布

RamosTears

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量363

点赞数 2

文章标签： bootstrap 轮播图初体验

本文链接：https://blog.csdn.net/ramosTears123/article/details/89179183

版权

效果图:

源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>轮播图</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        [data-ride="carousel"]{
            width: 500px;
            margin:auto;
        }
    </style>
</head>
<body>
<!--[if it ie9]>
<script src="html5shiv.min.js"></script>
<script src="respond.min.js"></script>
<![end it]-->
<div class="carousel slide" data-interval="2000" data-ride="carousel" id="abc">
    <ul class="carousel-indicators">
        <li data-target="#abc" data-slide-to="0" class="active"></li>
        <li data-target="#abc" data-slide-to="1"></li>
        <li data-target="#abc" data-slide-to="2"></li>
        <li data-target="#abc" data-slide-to="3"></li>
    </ul>
    <div class="carousel-inner">
        <div class="item active">
            <img src="自适应官网/img/jf1.jpg" alt="">
            <p class="carousel-caption">第一张图片</p>
        </div>
        <div class="item">
            <img src="自适应官网/img/fj41.jpg" alt="">
            <p class="carousel-caption">第二张图片</p>
        </div>
        <div class="item">
            <img src="自适应官网/img/fj31.jpg" alt="">
            <p class="carousel-caption">第三张图片</p>
        </div>
        <div class="item">
            <img src="自适应官网/img/fj2.jpg" alt="">
            <p class="carousel-caption">第四张图片</p>
        </div>
    </div>
    <a href="#abc" class="carousel-control left" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#abc" class="carousel-control right" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<script src="jquery-1.11.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

RamosTears

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap初体验,实现轮播图效果

效果图:源代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>轮播图</t...
复制链接

扫一扫