首页
所有分类
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事件实现代码
Mar 12 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
js调试系列 初识控制台
Jun 18 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
vue实现微信分享功能
Nov 28 Javascript
layui递归实现动态左侧菜单
Jul 26 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
Lifecycle(1) Spring(9) 温控(1) 小喇叭开始广播了(1) S-2000(1) 脏读(2) 小喇叭(1) 微信(2) 增删查改(1) IC-R9500(1)
You might like
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php 错误处理经验分享
2011/10/11 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
小程序自定义导航栏兼容适配所有机型（附完整案例）
2020/04/26 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
HTML5中的autofocus（自动聚焦）属性介绍
2014/04/23 HTML / CSS
工作自我评价怎么写
2014/01/29 职场文书
小班下学期个人总结
2015/02/12 职场文书
办公经费申请报告
2015/05/15 职场文书
美丽心灵观后感
2015/06/01 职场文书
画展观后感
2015/06/17 职场文书
酒店温馨提示语
2015/07/14 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
Nginx配置https的实现
2021/11/27 Servers