Bootstrap图片轮播效果详解

更新时间：2017年10月17日 10:41:14 作者：阿浩yohann

这篇文章主要为大家详细介绍了Bootstrap图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

导言

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

示例

下面演示图片的轮播，使用bootstrap中的Carousel显示循环播放元素插件。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  <div class="item">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  ...
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

在src中插入图片已为图片设置大小

还可以为其加上标题

<div class="item">
 <img src="..." alt="...">
 <div class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </div>
</div>

enter image description here

参考

1.Bootstrap官网中文文档

2.菜鸟学堂Bootstrap教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js左右弹性滚动对联广告代码分享
这个对联广告与其它的有所区别，这个是页面加载时先没看到广告，然后从左边快速飞进来的两个对联广告哦，下面我们一起来看看对联广告效果代码
2014-02-02
javascript createAdder函数功能与使用说明
createAdder（x）是一个函数，返回一个函数。在JavaScript中，函数是第一类对象：另外它们可以被传递到其他函数作为参数和函数返回。在这种情况下，函数返回本身就是一个函数接受一个参数，并增加了一些东西。
2010-06-06
JS实现分页导航效果
这篇文章主要为大家详细介绍了JS实现动态页码及分页导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
JS桶排序的简单理解与实现方法示例
这篇文章主要介绍了JS桶排序的简单理解与实现方法,结合实例形式详细分析了js桶排序的概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
2019-11-11
JavaScript优化以及前段开发小技巧
随着前端技术的发展，前端业务越来越繁重，这大大增加了JS代码量。因此，要提高Web的性能，我们不仅需要关注页面加载的时间，还要注重在页面上操作的响应速度。那么，接下来我们讨论几种能够提高JavaScript效率的方法。
2017-02-02
js调用刷新界面的几种方式
这篇文章主要为大家详细介绍了js调用刷新界面的几种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JavaScript实现代码雨效果
这篇文章主要为大家详细介绍了JavaScript实现代码雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
javascript实现点击按钮切换图片
这篇文章主要为大家详细介绍了javascript实现点击按钮切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
对前端工程师来说,跨浏览器的兼容性问题一直是最头疼的,测试一个小小的东西,就要打开N个浏览器,然后比较来比较去,记录个浏览器的数据,比较不同,实在是麻烦.
2010-03-03
javascript常用的设计模式
本文主要介绍了javascript常用的设计模式:单例模式;工厂模式;适配模式;外观模式。下面跟着小编一起来看下吧
2017-02-02