web前端-boostrap图片轮播

最新推荐文章于 2024-05-17 06:14:41 发布

辣姐什么鬼

最新推荐文章于 2024-05-17 06:14:41 发布

阅读量685

点赞数 1

分类专栏： web前端文章标签： web前端 bootstrap

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<style>
    *{
        margin:0;
        padding:0;
    }
    #myCarousel{
        width:800px;
        height:400px;
        margin:200px auto;
    }
   a{
       font-size:60px;
       font-weight:bold;
   }
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"><img src="1.jpg"></div>
        <div class="item"><img src="2.jpg"></div>
        <div class="item"><img src="3.jpg"></div>
    </div>
    <!-- Carousel nav -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
</html>

辣姐什么鬼

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端-boostrap图片轮播

&lt;!doctype html&gt;&lt;html lang="zh-cn"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&a
复制链接

扫一扫

专栏目录