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 相关文章推荐
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
layui弹出层效果实现代码
May 19 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
node+vue实现文件上传功能
May 28 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python 加密与解密小结
2018/12/06 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
tensorflow 查看梯度方式
2020/02/04 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
长城英文导游词
2015/01/30 职场文书
安全生产奖惩制度
2015/08/06 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript