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 相关文章推荐
用jquery来定位
Feb 20 Javascript
js null undefined 空区别说明
Jun 13 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
php-fpm配置详解
2014/02/12 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP7多线程搭建教程
2017/04/21 PHP
js展开闭合效果演示代码
2013/07/24 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python Django框架实现自定义表单提交
2016/03/25 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python实现词法分析器
2019/01/31 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
纯html+css实现打字效果
2021/08/02 HTML / CSS
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
一起来学习Python的元组和列表
2022/03/13 Python