<!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文件夹中):

  1. <script type="text/javascript" src="/scripts/jqthumb.js"></script>

2.在图片加载(onload)的时候调用DrawImage()函数来生成缩略图

DrawImage()函数正是基于jqthumb.js库的，注意该函数一定要写在轮换插件前，因为我们必须在图片加载前生成缩略图。DrawImage()函数代码如下：

  1. <!--导入插件-->
  2. <script type="text/javascript" src="/scripts/jqthumb.js"></script>
  3. <script>
  4. function DrawImage(hotimg)
  5. {
  6. $(hotimg).jqthumb({
  7. classname : 'jqthumb',
  8. width : '100%',//宽度
  9. height : '300px',//高度
  10. position : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
  11. zoom : '1',//缩放比例
  12. method : 'auto',//提交方法，用于不同的浏览器环境，默认为‘auto’
  13. });
  14. }
  15. </script>

在上述代码中，我们使用了jqthumb，并且传入了相关初始化参数。调用了该函数后，在图片加载的时候，就会按照上述参数产生图片的缩略图，从而解决图片变形问题。由于缩略图是从原始图片的正中间开始往两边取得，所以该缩略图包含了图片的主要内容。（具体使用见右边详细代码）

bootstrap轮播图的更多相关文章

  1. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

  2. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  3. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  4. 动态请求数据并放入bootstrap轮播图

    下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  6. bootstrap轮播图组件

    一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...

  7. Bootstrap 轮播图（Carousel）插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. bootstrap轮播图不能显示左右箭头

    引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277

  9. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. [require-js]向下滑动ajax加载的javascript实现

    define(function(){ function ScrollMoreInfo($wraper , loadDataFunc , json_ids , perNum , tpl_info) { ...

  2. HTML超级链接详细讲解

    超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转.超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习. —  注意 ...

  3. [Proposal]Tank Battle——Infinite

    Tank Battle——Infinite 把经典的坦克大战扩展到一个“无限”大的2D地图上.支持“全世界”的玩家同时在线玩. 游戏模式当然要做成全新的.增加玩家之间的交互,但又不较强的依赖于实时的通 ...

  4. java并发的处理方式

    1 什么是并发问题. 多个进程或线程同时(或着说在同一段时间内)访问同一资源会产生并发问题. 银行两操作员同时操作同一账户就是典型的例子.比如A.B操作员同时读取一余额为1000元的账户,A操作员为该 ...

  5. ASP.NET中实现回调

    一.引言 在ASp.NET网页的默认模型中,用户通过单击按钮或其他操作的方式来提交页面,此时客户端将当前页面表单中的所有数据(包括一些自动生成的隐藏域)都提交到服务器端,服务器将重新实例化一个当前页面 ...

  6. C#基础——C#中问号的使用

    1. 可空类型修饰符(?): 引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空. 例如:string str=null; 是正确的,int i=null; 编译器就会报错. 为了使值 ...

  7. ZKWeb网页框架1.5正式发布

    本次更新的内容有 明显的改进了IoC容器在部分情况下的性能, 当前的性能和Grace, DryIoC同等 添加IHttpResquestHandlerWrapper接口让重载Http上下文更容易 添加 ...

  8. Git-遇到的问题以及解决方法

    1.将本地内容推送到远程仓库后,远程仓库里的文件夹不可点击 原因:在本地添加文件夹A时,又在A里使用了git init命令 解决:删除文件夹A,再重新添加过 2.其他人推送不了内容到远程仓库 原因:权 ...

  9. 如何执行超过一百兆(100MB)的sql脚本？

    最近遇到一个问题,在sqlserver的查询分析器里面执行一个超过100MB的数据库脚本,发现老是报“引发类型为“System.OutOfMemoryException”的异常”,上网查了一下,主要是 ...

  10. 《UNIX环境网络编程》第十四章第14.9小结(bug)

    1.源代码中的<sys/devpoll.h>头文件在我的CentOS7系统下的urs/include/sys/目录下没有找到. 而且我的CentOS7也不存在这个/dev/poll文件. ...