bootstrap实现轮播图-大全

蜡笔大帅

已于 2022-02-20 11:05:48 修改

阅读量1.6w

点赞数 12

文章标签： bootstrap javascript css

于 2022-02-09 11:01:28 首次发布

本文链接：https://blog.csdn.net/jgujgu/article/details/122836634

版权

轮播图就不做过多的介绍了，大家都知道，只是轮播的实现有多种方式，例如使用纯js写，费时费力，且还不适用于各种终端设备，但是bootstrap就不一样了，只需写一套代码，无论是手机端还是ipad端，再或者是PC端，都可以正常使用。

如何创建轮播

步骤：

准备轮播需要的图片，大于等于两张。
准备bootstrap的css和js以及jquery1.10+的js文件文件，这个网上一搜一大堆，也可以去官网下载。
将下载的css文件放入项目的css目录内，js文件放如js目录内，以及图片放在img(专放图片)的文件夹内。
在html中写代码，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>
<body>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul 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>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

</body>
</html>

轮播图片上添加描述

在每个 class=“carousel-item” 内添加 class=“carousel-caption” 来设置轮播图片的描述文本:

<div class="carousel-item">
  <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
  <div class="carousel-caption">
    <h3>第一张图片描述标题</h3>
    <p>描述文字!</p>
  </div>
</div>

以上实例中使用的类说明

.carousel
创建一个轮播

.carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。

.carousel-inner 添加要切换的图片

.carousel-item 指定每个图片的内容

.carousel-control-prev 添加左侧的按钮，点击会返回上一张。

.carousel-control-next 添加右侧按钮，点击会切换到下一张。

.carousel-control-prev-icon 与 .carousel-control-prev 一起使用，设置左侧的按钮

.carousel-control-next-icon 与 .carousel-control-next 一起使用，设置右侧的按钮

.slide 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下：

初始化轮播

$('.carousel').carousel({
	interval: 5000,
	pause: null,
	wrap:true
})

interval number 默认值：5000 data-interval 自动循环每个项目之间延迟的时间量。如果为
false，轮播将不会自动循环。

pause string 默认值：“hover” data-pause 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。

wrap boolean 默认值：true data-wrap 轮播是否连续循环。

轮播（Carousel）插件中有用的方法：

<script>
   $(function(){
      // 初始化轮播
      $(".start-slide").click(function(){
         $("#myCarousel").carousel('cycle');
      });
      // 停止轮播
      $(".pause-slide").click(function(){
         $("#myCarousel").carousel('pause');
      });
      // 循环轮播到上一个项目
      $(".prev-slide").click(function(){
         $("#myCarousel").carousel('prev');
      });
      // 循环轮播到下一个项目
      $(".next-slide").click(function(){
         $("#myCarousel").carousel('next');
      });
      // 循环轮播到某个特定的帧
      $(".slide-one").click(function(){
         $("#myCarousel").carousel(0);
      });
      $(".slide-two").click(function(){
         $("#myCarousel").carousel(1);
      });
      $(".slide-three").click(function(){
         $("#myCarousel").carousel(2);
      });
   });
</script>

轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用

		//监听轮播
		$('#myCarousel').on('slide.bs.carousel', function (event) {
			var $hoder = $('#myCarousel').find('.item'),
			$items = $(event.relatedTarget);
			//getIndex当前位置的索引
			var getIndex= $hoder.index($items);
			alert("当调用 slide 实例方法时立即触发该事件。");
			//做你想做的事
		})

工作之余用博客记录自己希望有能帮助到各位看官
如有错误或不全面的地方望各位能提点一二和留下宝贵意见

蜡笔大帅

关注

12
点赞
踩
67

收藏

觉得还不错? 一键收藏
1
评论
bootstrap实现轮播图-大全

轮播图就不做过多的介绍了，大家都知道，只是轮播的实现有多种方式，例如使用纯js写，费时费力，且还不适用于各种终端设备，但是bootstrap就不一样了，只需写一套代码，无论是手机端还是ipad端，再或者是PC端，都可以正常使用。如何创建轮播步骤：准备轮播需要的图片，大于等于两张。准备bootstrap的css和js以及jquery1.10+的js文件文件，这个网上一搜一大堆，也可以去官网下载。将下载的css文件放入项目的css目录内，js文件放如js目录内，以及图片放在img(专放图片
复制链接

扫一扫