Bootstrap V3版本轮播（滚动幻灯片）插件使用

程序员文章站 2022-05-26 19:56:09

...

首页大屏滚动幻灯片是网站常用表现手法，尤其企业展示型网站使用最多，下面针对Bootstrap V3版本幻灯片调用做详细分解记录，以便后期查阅。

一、首先引用Bootstrap源码的CSS和JS与相关的JQuery版本文件（V3版本匹配的JQ文件版本为1.9版本系列）。

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap-min.js"></script>

二、书写轮播代码框架

首先写最外面的主题部分

...这里面写主要内容

</div>

先定义一个ID为myCarousel class名称为carousel slide 这是固定的

其次写 Indicators 就是轮播图下面的指示信息通常有圆形、方形、圆圈等

</ol>

这里 OL 也可以用 UL 这 data-target="#myCarousel" ID和外面的一样。

第三写轮播主体部分

</div>

</div>

</div>

这里的图片和上一步提示是一致的上一步写了 0～2的索引，是三个提示信息，那么这里就写三张图片的内容。

第四写左右 Controls

</a>

</a>

这里的图标可以从bootstrap图片库是寻找注意 data-slide 的用法。

第五，写JS代码，carousel 方法

//轮播自动播放

$('#myCarousel').carousel({

//自动4秒播放

interval : 4000,

//设置不间断播放

wrap:true,

});

</script>

因为JS加载慢，所以建议放到最下面</body>之前。

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称	类型/默认值	Data 属性名称	描述
interval	number 默认值：5000	data-interval	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause	string 默认值："hover"	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean 默认值：true	data-wrap	轮播是否连续循环。

演示代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>网站标题</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div id="header">
   <div class="banner">
     <div id="myCarousel" class="carousel slide"  data-ride="carousel" data-wrap="false" data-interval="1000">
     <!-- 轮播（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/banner1.jpg" alt="First slide">
         </div>
         <div class="item">
             <img src="images/banner2.jpg" alt="First slide">
         </div>
         <div class="item">
             <img src="images/banner3.jpg" alt="First slide">
         </div>
     </div>
     <!-- 轮播（Carousel）导航 -->
     <a class="carousel-control left" href="#myCarousel"
         data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
     </a>
     <a class="carousel-control right" href="#myCarousel"
         data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
     </a>
 </div>
   </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap-min.js"></script>
    <script type="text/javascript">
//轮播自动播放
$('#myCarousel').carousel({
//自动4秒播放
interval : 4000,

//设置自动循环
wrap:true,
});
</script>
  </body>
</html>

相关标签： bootatrap V3 幻灯片轮播图片

上一篇： JQ 简洁的轮播图

下一篇： jQuery实现轮播图（无缝轮播，附效果图），代码有详解。