web前端-boostrap图片轮播

作者：寸_铁 | 2024-07-17 10:17:03

踩

web前端-boostrap图片轮播


<!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>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】