Bootstrap的图片轮播示例代码

最新推荐文章于 2024-01-15 19:39:34 发布

原创最新推荐文章于 2024-01-15 19:39:34 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Bootstrap实现轮播图效果，包括JS和CSS文件的引入方式，以及HTML结构的具体编写方法。通过示例展示了如何设置图片切换，并提供完整的HTML文件示例。

示例一：

插入js及css支持

<span style="font-size:14px;"><link rel="stylesheet" href="css/bootstrap.min.css"/>  
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</span>

HTML代码

<span style="font-size:14px;"><div id="pictures" class="item">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <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）项目 -->
        <div class="carousel-inner">
         <div class="item active">
           <img src="images/gf.jpg" class="img-responsive" alt="First slide">
         </div>
         <div class="item">
           <img src="images/psb.jpg" class="img-responsive" alt="Second slide">
         </div>
         <div class="item">
           <img src="images/uyt.jpg" class="img-responsive" alt="Third slide">
         </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel"
         data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel"
         data-slide="next">›</a>
      </div> 
    </div>
</span>

示例二

用法

<div id="myCarousel" class="carousel slide">
 <!-- Carousel items -->
 <div class="carousel-inner">
  <div class="active item">…</div>
  <div class="item">…</div>
  <div class="item">…</div>
 </div>
 <!-- Carousel nav -->
 <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

所以，您把想要呈现的条目（比如 images）以循环顺序放置在 "carousel-inner" div 中，通过 "" 创建条目的导航。它使用定制的 data 属性 "data-slide" 来导航到上一个和下一个条目。

您必须在您要创建轮播的 HTML 文件引用 jquery.js 和 bootstrap-carousel.js 文件。

轮播实例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</title> 
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
 <ul class="pager">
 <li>
  <a href="#">Previous</a>
 </li>
 <li>
  <a href="#">Next</a>
 </li>
</ul>
</body>
</html>