bootstrap轮播图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用carousel</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin:10px;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="javascript:void(0)">
<img src="http://fun.datang.net/uploadpic/276e0c7bb66b46318c3bb9c59cad9411.jpg" style="width:300px;height:300px;" alt="图片一"/></a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="javascript:void(0)">驴子跳</a>
</h4>
</div>
</div>
<div class="item">
<a href="javascript:void(0)">
<img src="http://img5.imgtn.bdimg.com/it/u=372265704,58471841&fm=21&gp=0.jpg" style="width:300px;height:300px;" alt="图片二"/>
</a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="javascript:void(0)">MarkDown</a>
</h4>
</div>
</div>
<div class="item">
<a href="javascript:void(0)">
<img src="http://img1.imgtn.bdimg.com/it/u=3318255286,2969027749&fm=23&gp=0.jpg" style="width:300px;height:300px;" alt="图片三"/>
</a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="javascript:void(0)">BootStrap</a>
</h4>
</div>
</div>
<!-- 控制按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
解决展示时图片变形的问题
运行上节的代码我们发现插件中的图片发生了变形，分析其原因为：轮换插件中的图片使用的文章中的第一张图片，图片的大小不一，而轮播插件的大小基本是固定的，所以展示的时候图片出现了变形。下面看看怎么解决这个问题：
1.引入Jqthumb.js
在BootStrap中我们找不到解决办法，所以我们需要借助其它工具。Jqthumb插件是专门用来为图片生成缩略图的，它可以从图片中的任何坐标点开始取指定大小的图片区域作为图片的缩略图。你可以点击 https://github.com/pakcheong/jqthumb 来下载它，并将其应用到项目中(假设在当前项目中，jqthumb.js放置在scripts文件夹中):
- <script type="text/javascript" src="/scripts/jqthumb.js"></script>
2.在图片加载(onload)的时候调用DrawImage()函数来生成缩略图
DrawImage()函数正是基于jqthumb.js库的，注意该函数一定要写在轮换插件前，因为我们必须在图片加载前生成缩略图。DrawImage()函数代码如下：
- <!--导入插件-->
- <script type="text/javascript" src="/scripts/jqthumb.js"></script>
- <script>
- function DrawImage(hotimg)
- {
- $(hotimg).jqthumb({
- classname : 'jqthumb',
- width : '100%',//宽度
- height : '300px',//高度
- position : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
- zoom : '1',//缩放比例
- method : 'auto',//提交方法，用于不同的浏览器环境，默认为‘auto’
- });
- }
- </script>
在上述代码中，我们使用了jqthumb，并且传入了相关初始化参数。调用了该函数后，在图片加载的时候，就会按照上述参数产生图片的缩略图，从而解决图片变形问题。由于缩略图是从原始图片的正中间开始往两边取得，所以该缩略图包含了图片的主要内容。（具体使用见右边详细代码）
bootstrap轮播图的更多相关文章
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- 动态请求数据并放入bootstrap轮播图
下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- bootstrap轮播图组件
一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...
- Bootstrap 轮播图（Carousel）插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap轮播图不能显示左右箭头
引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277
- Bootstrap 我的学习记录4 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
随机推荐
- string转Date转回String(JAVA)
String dateString = "2012-12-06 "; SimpleDateFormat sdf = new SimpleDateFormat("yyy ...
- UWP 多语言的三个概念
首先了解一下 RFC4646 和 BCP-47 是什么东西: RFC4646 The name is a combination of an ISO 639 two-letter lowercase ...
- Python2.7更新pip：UnicodeDecodeError: 'ascii' codec can't decode byte 0xb7 in position 7: ordinal not in range(128)
1.首先更新pip版本的时候出现.这是出现在python2.7.16出现的问题 2.进入你的pyhton目录下的Lib\mimetypes.py 打开它 3.在import下面加入这代码 if sys ...
- webApp在各大Android市场上的发布
本来打算每个月都写上一篇博客的,可是计划永远赶不上变化,不过这其中也有自己的懒惰,果然过年让整个人懈怠了不少.年后一直在赶项目以致于到今天才动手写这篇文章. 这一篇主要写点在公司的要求下发布的webA ...
- MYSQL基础语法的使用
喜欢的朋友可以关注下,粉丝也缺. MYSQL介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之 ...
- Python UDP实例
UDP通信过程 udp 不需要经过3次握手和4次挥手,不需要提前建立连接,直接发数据就行. server端 import socket BUFSIZE = 1024 ip_port = ('127.0 ...
- Flask-WTF
Flask-WTF 提供了简单地 WTForms 的集成. 官方文档:http://www.pythondoc.com/flask-wtf/index.html 功能 集成 wtforms. 带有 c ...
- Linux inode空间占满 “no space left on device”
Linux inode空间占满 提示 “no space left on device” 中文环境:“无法创建XXX目录,设备没有空间” Linux系统iNode耗尽硬盘无法写入文件怎么办?df -h ...
- 剑指offer十五之反转链表
一.题目 输入一个链表,反转链表后,输出链表的所有元素. 二.思路 详细分析见代码注释 三.代码 public class Solution { public ListNode Reverse ...
- 图片训练：使用卷积神经网络（CNN）识别手写数字
这篇文章中,我们将使用CNN构建一个Tensorflow.js模型来分辨手写的数字.首先,我们通过使之“查看”数以千计的数字图片以及他们对应的标识来训练分辨器.然后我们再通过此模型从未“见到”过的测试 ...