Bootstrap图片轮播组件Carousel使用方法详解


Posted in Javascript onOctober 20, 2016

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小。

如果使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间。

同时说一下,Carousel这个词的本义是回旋木马。

一、基本目标

在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明。

由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但是基本的效果还算是展示出来了。

这个Bootstrap的图片轮播组件Carousel,不兼容IE6与7,需要IE6支持的话,要去网站中下载Bootstrap的IE6组件支持(点击打开链接)。同时,在Google Chrome中图片文件说明会渗有一点小黑色,不过不影响浏览:

Bootstrap图片轮播组件Carousel使用方法详解

在不同浏览器中的展示情况是不同的。IE8的话是这样的效果:

Bootstrap图片轮播组件Carousel使用方法详解

二、基本思想

见下图网页布局:

Bootstrap图片轮播组件Carousel使用方法详解

三、制作过程

1、同之前《【JavaScript】使用Bootstrap来编写一个在当前网页弹出的对话框,可以关闭,不用跳转,非弹窗》的第一步

因为需要使用Bootstrap,所以先在官网下载组件即可,用于生产环境的Bootstrap版本,Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3。本文也是根据Bootstrap3制作。同时,Bootstrap3所提供的JavaScript效果需要到jQuery1.11支持,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11(点击打开链接),而不是不兼容旧浏览器IE6的jQuery2。下载完之后,配置好站点目录。把Bootstrap3直接解压到站点目录,而把jquery-1.11.1.js放到js目录,也就是与bootstrap.js同一目录,站点文件夹的结构大致如下:

Bootstrap图片轮播组件Carousel使用方法详解

2、以下是网页的全代码,下面一部分一部分进行说明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>图片轮播Carousel</title>
 </head>

 <body>

 <div class="container">
 
 <div class="page-header">
 <h1>
 图片轮播Carousel
 </h1>
 </div>

 <div style="width: 640px; height: 480px; margin-right: auto; margin-left: auto;">

 <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000">

 <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>

 <div class="carousel-inner" role="listbox">
  
 <div class="item active">
 <a href="images/img0.jpg"><img src="images/img0.jpg" alt="img0"></a>
 <div class="carousel-caption">
 <h3>
 img0
 </h3>
 <p>
 我是img0的图片说明
 </p>
 </div>
 </div>
  
 <div class="item">
 <a href="images/img10.jpg"><img src="images/img10.jpg" alt="img10"></a>
 <div class="carousel-caption">
 <h3>
 img10
 </h3>
  <p>
 我是img10的图片说明
  </p>
 </div>
 </div>

 <div class="item">
 <a href="images/img2.jpg"><img src="images/img2.jpg" alt="img2"></a>
 <div class="carousel-caption">
 <h3>
 img2
 </h3>
 <p>
 我是img2的图片说明
 </p>
 </div>
 </div>

 </div>

 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
  <span class="glyphicon glyphicon-chevron-left"></span> </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
  <span class="glyphicon glyphicon-chevron-right"></span> </a>

 </div>
 </div>
 </div>
 </body>
</html>

(1)<head>部分

<head>
 <!--声明网页编码,自动适应浏览器的尺寸,要使用bootstrap的css,需要jquery支持,要使用bootstrap的js,标题-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>图片轮播Carousel</title>
 </head>

(2)<body>部分

先声明一个容器container,这个容器能使网页的所有元素自动归于网页中央,之后在这个容器中编写元素。

首先编写页头,声明一个页头,之后其里面写入一段文本。

<div class="page-header">
 <h1>
 图片轮播Carousel
 </h1>
 </div>

之后定义一个未命名的图层div,主要是用来规范图片轮播组件用的。bootstrap的图片轮播组件大小不能对其里面的元素,加入width与height参数进行规定。这样图片轮播组件会失真。同时这个组件要居中,必须在div的style属性中使用margin-right: auto; margin-left: auto;来约束,额外加入align="center"是根本一点效果都没有。

最后是图片组件各部分的详细说明:

<div style="width: 640px; height: 480px; margin-right: auto; margin-left: auto;">
 <!--图片轮播组件的名称为carousel,data-ride元素是bootstrap要求存在的,data-interval的值是每隔1000毫秒,也就是1秒换一张图片,此值太小组件会失真-->
 <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000">
 <!--这里定义有几张图片,如果再多一张图片就再下面多加一项,data-slide-to的值加一,首张图片也就是第0张图片必须要有class="active"否则组件无法工作-->
 <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>

 <div class="carousel-inner" role="listbox">
  <!--以下是各张的图片的详细编辑,首张图片的class值必须为item active,余下的皆为item-->
 <div class="item active">
  <!--意为点击img0.jpg这张图片就打开img0.jpg的超级链接,如果不需要超级链接,则去掉<a>标签-->
 <a href="images/img0.jpg"><img src="images/img0.jpg" alt="img0"></a>
  <div class="carousel-caption">
  <!--图片下的文字说明-->
 <h3>
 img0
 </h3>
 <p>
 我是img0的图片说明
 </p>
 </div>
 </div>
  
 <div class="item">
 <a href="images/img10.jpg"><img src="images/img10.jpg" alt="img10"></a>
 <div class="carousel-caption">
 <h3>
 img10
 </h3>
  <p>
 我是img10的图片说明
  </p>
 </div>
 </div>

 <div class="item">
 <a href="images/img2.jpg"><img src="images/img2.jpg" alt="img2"></a>
 <div class="carousel-caption">
 <h3>
 img2
 </h3>
 <p>
 我是img2的图片说明
 </p>
 </div>
 </div>

 </div>
 
  <!--这里是组件中向左想右的两个按钮,固定存在的框架代码-->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
  <span class="glyphicon glyphicon-chevron-left"></span> </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
  <span class="glyphicon glyphicon-chevron-right"></span> </a>

 </div>
 </div>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 #Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 #Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 #Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 #Javascript
JS调用某段SQL语句的方法
Oct 20 #Javascript
Angularjs 设置全局变量的方法总结
Oct 20 #Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 #Javascript
You might like
PHP之数组学习
2011/05/29 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Python修改MP3文件的方法
2015/06/15 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python 实现倒排索引的方法
2018/12/25 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
python 基于opencv实现图像增强
2020/12/23 Python
python之随机数函数的实现示例
2020/12/30 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
2014年度安全工作总结
2014/12/04 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
亮剑观后感300字
2015/06/05 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
Python 中的Sympy详细使用
2021/08/07 Python