首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap图片轮播组件使用实例解析

Posted in Javascript onJune 30, 2016

使用Bootstrap来编写图片轮播组件Carousel，则能够节约很多时间，图片轮播组件是一个在网页中很常见的技术，但是如果直接编写的话，需要很长的JavaScript编码，同时也不好控制大小。 
同时说一下，Carousel这个词的本义是回旋木马。 

一、基本目标
在网页编写多张图片的轮播组件Carousel，鼠标放在上面自带悬停效果，并且在每张图片下面配有图片说明。 
由于笔者的电脑视频录制软件比较渣，也觉得没必要画太多时间在这上面，觉得只要能说明问题就行，所以下面的GIF失色比较严重，但是基本的效果还算是展示出来了。 
这个Bootstrap的图片轮播组件Carousel，不兼容IE6与7，需要IE6支持的话，要去这个网站中下载Bootstrap的IE6组件支持（点击打开链接）。同时，在Google Chrome中图片文件说明会渗有一点小黑色，不过不影响浏览： 

Bootstrap图片轮播组件使用实例解析

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

Bootstrap图片轮播组件使用实例解析

二、基本思想
见下图网页布局： 

Bootstrap图片轮播组件使用实例解析

三、制作过程
1、同之前《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图片轮播组件使用实例解析

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>

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

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

Bootstrap图片轮播组件使用实例解析

- Author -

yongh701

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
JavaScript获取短信验证码（周期性）
Dec 29 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
js获取浏览器地址（获取第1个斜杠后的内容）
Sep 03 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 #Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 #Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 #Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 #Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 #Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 #Javascript
老生常谈 js中this的指向
Jun 30 #Javascript
DSP(2) TECSUN(1) 接收机(2) 东方红(1) 车机(1) 德生(17) 电子管(5) PL-365(1) 海燕B411(1) 修复(2)
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python通过链接抓取网站详解
2019/11/20 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
世界第一冲浪品牌：O’Neill
2016/08/30 全球购物
英文留学推荐信范文
2014/01/25 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
支部书记四风对照材料
2014/08/28 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
体检通知范文
2015/04/21 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
JavaScript实现简单计时器
2021/06/22 Javascript
JavaScript设计模式之原型模式详情
2022/06/21 Javascript