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日期对象格式化为字符串的实现方法
Jan 14 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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/07/22 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
一些不错的js函数ajax
2008/08/20 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python如何实现邮件功能
2020/05/27 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
年度献血先进个人事迹材料
2014/02/14 职场文书
淘宝活动总结范文
2014/06/26 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书