普通的轮播图

最新推荐文章于 2024-06-18 11:56:32 发布

valives

最新推荐文章于 2024-06-18 11:56:32 发布

阅读量154

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_45807026/article/details/106208706

版权

web前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

如图所示
在这里插入图片描述
代码如下

`<!DOCTYPE html>
<html >
<head>
    <title> Bootstrap轮播插件</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="ie-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap-3.3.7-dist/test/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="slidershow" class="carousel slide" data-ride="carousel">
<!--设置图片轮播计数器-->
    <ol class="carousel-indicators">
    <li class="active" data-target="#slidershow" data-slide-to="0"></li>
    <li data-target="#slidershow" data-slide-to="1"></li>
    <li data-target="#slidershow" data-slide-to="2"></li>
    </ol>
<!--设置轮播图片-->
<div class="carousel-inner">
    <div class="item active">
        <a href="#">
            <img src="1.jpg"
                 style=" height:400px; margin:0 auto;"                 >
        </a>
<div class="carousel-caption">
    <h3>猫猫</h3>
    <p>睡觉的猫</p>
    </div>
</div>
<div class="item ">
<a href="#">
    <img src="2.jpg"
    style= "height:400px ; margin:0 auto;">
</a>
<div class="carousel-caption">
     <h3>2</h3>
     <p>描述2..</p>
    </div>
</div>
<div class="item">
<a href="#">
<img src="3.jpg"
             style="height:400px;margin:0 auto;">
</a>
<div class="carousel-caption">
<h3>3</h3>
<p>描述3..</p>
</div>
</div>
</div>
<!--设置轮播图片控制器-->
<a class="left carousel-control" href="#slidershow" role="button"
data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#slidershow" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="bootstrap-3.3.7-dist/test/js/bootstrap.min.js"></script>
<script src="bootstrap超详细教程/js/jquery-1.10.2.min.js"></script>
</body>
</html>`

valives

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
普通的轮播图

如图所示代码如下`<!DOCTYPE html><html ><head> <title> Bootstrap轮播插件</title> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible"content="ie-edge"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫