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个精彩的专题:

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

Javascript 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
浅谈javascript中的闭包
May 13 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 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
You might like
理解php Hash函数,增强密码安全
2011/02/25 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php页面防重复提交方法总结
2013/11/25 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python书籍信息爬虫实例
2018/03/19 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Python如何读取、写入JSON数据
2020/07/28 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
历史学专业求职信
2014/06/19 职场文书
黄石寨导游词
2015/02/05 职场文书
社区党务工作总结2015
2015/05/19 职场文书
反邪教观后感
2015/06/11 职场文书
施工安全责任协议书
2016/03/23 职场文书
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python