<!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. Swift3 使用系统UIAlertView方法做吐司效果

    /** *显示弹出信息 */ class func showAlertMessage(_ str:String,showtime Num:Double){ let alert = UIAlertVie ...

  2. spring默认为单例模式

    这两天看到一个bug,记录下. 在获取任务的时候,本来任务不是由这个柜员领取的,但是最后跑到那个柜员下面去了. 查看日志,发现两个任务的领取操作很近,日志是穿插着打的. 后来经人指点,说spring初 ...

  3. sql server rdl report 如何用动态sql

    我做rdl report 一般用存储过程,可是今天遇到个问题,需要用动态sql,rdl report数据集不能绑定字段 查了一下谷歌,解决如下: declare @CarrierList table ...

  4. Python基础 --函数的参数

    定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复杂逻辑被封装起来,调用者无需了解 ...

  5. [HNOI2015]开店（树剖+主席树+标记永久化）

    听说正解点分树?我不会就对了 此题是 \([LNOI2014]LCA\) 强化版,也是差分一下,转化为区间加区间和 不过权值有大小要求,那么我们按照权值排序,依次加入主席树,询问的时候 \(lower ...

  6. Akka（0）：聊聊对Akka的初步了解和想法

    前一段时间一直沉浸在函数式编程模式里,主要目的之一是掌握一套安全可靠的并发程序编程方法(concurrent programming),最终通过开源项目FunDA实现了单机多核CPU上程序的并行运算. ...

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

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

  8. ubuntu下wps无法使用搜狗输入法输入中文

    sudo vim /usr/bin/et sudo vim /usr/bin/wps sudo vim /usr/bin/wpp 以上三个文件,都加入如下内容后重新打开文档即可 export XMOD ...

  9. 【hyperscan】编译hyperscan 4.0.0

    ref: http://01org.github.io/hyperscan/dev-reference/getting_started.html 1. 硬件需求 intel x86处理器 64-bit ...

  10. day 38 jq 入门 学习(一)

    前情提要: jq是简化版本的js 可以把很多很复杂的js 提炼让前端代码更好写 一:jq的使用 <!DOCTYPE html> <html lang="en"&g ...