bootstrap实现轮播图-大全

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

如何创建轮播

步骤:

  1. 准备轮播需要的图片,大于等于两张。

  2. 准备bootstrap的css和js以及jquery1.10+的js文件文件,这个网上一搜一大堆,也可以去官网下载。

  3. 将下载的css文件放入项目的css目录内,js文件放如js目录内,以及图片放在img(专放图片)的文件夹内。

  4. 在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
    点赞
  • 65
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是使用Bootstrap实现轮播图的代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Carousel Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <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> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="img1.jpg" alt="Image1"> <div class="carousel-caption"> <h3>Image1</h3> <p>Description1</p> </div> </div> <div class="item"> <img src="img2.jpg" alt="Image2"> <div class="carousel-caption"> <h3>Image2</h3> <p>Description2</p> </div> </div> <div class="item"> <img src="img3.jpg" alt="Image3"> <div class="carousel-caption"> <h3>Image3</h3> <p>Description3</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html> ``` 其中,`<ol>` 标签用于设置轮播图的指示器,每个 `<li>` 标签对应一个轮播图图片。`<div class="carousel-inner">` 标签中的每个 `<div class="item">` 标签表示一个轮播项,`<img>` 标签用于设置图片,`<div class="carousel-caption">` 标签用于设置图片描述。最后,左右箭头控制使用 `<a class="left carousel-control" href="#myCarousel" data-slide="prev">` 和 `<a class="right carousel-control" href="#myCarousel" data-slide="next">` 标签实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值