首页
所有分类
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 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JS常用正则表达式总结
Nov 12 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
浅析jQuery 遍历函数，javascript中的each遍历
May 25 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
js基于div丝滑实现贝塞尔曲线
Sep 23 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
#{}(1) 选择器(1) canvas(2) 代理(2) IC-R9500(1) 增删查改(1) 脏读(2) 克隆(1) SQL注入(2) 外键(1)
You might like
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
python+pyqt实现右下角弹出框
2017/10/26 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
基于python操作ES实例详解
2019/11/16 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
python中time tzset()函数实例用法
2021/02/18 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
北欧最好的童装网上商店：Babyshop
2019/09/15 全球购物
欧洲最古老的鞋厂：Peter Kaiser
2019/11/05 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
小孩百日宴答谢词
2014/01/15 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
学生检讨书范文
2015/01/27 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
市场总监岗位职责
2015/02/11 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年行政执法工作总结
2015/05/23 职场文书