<!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. Chubby是什么？

    先简单的理解,以后补充: 为了解决hadoop分布式系统的一致性问题 ,有很多人提出很多protocol,其中就有有名的Paxos算法(Latex作者提出,算法需要学习), 但是Chubby并不是一个 ...

  2. Android-Kotlin-印章类

    上一篇博客介绍了,Android-Kotlin-枚举enum: 由于枚举 和 印章类 有相似之处,所以两者对比一下: Kotlin的枚举,重点区分的数据本身 Kotlin的印章类,重点区分的是数据类型 ...

  3. [Leedcode 169]Majority Element

    1 题目描述 Given an array of size n, find the majority element. The majority element is the element that ...

  4. 第21件事 资源支持离不开RACI表

    十步法的第九步寻求资源支持.资源主要包括人力资源.物力资源和财力资源.人力资源,即需要多少人:物力资源,即需要多少软硬件设备:财力资源,即需要多少预算.根据产品或项目目标,资源估算时要考虑需要什么样的 ...

  5. Spark技术的总结 以及同storm，Flink技术的对比

    spark总结 1.Spark的特点: 高可伸缩性 高容错 基于内存计算 支持多种语言:java,scala,python,R 高质量的算法,比MapReduce快100倍 多种调度引擎:可以运行于Y ...

  6. FFmpeg4.0笔记：rtsp2rtmp

    Github https://github.com/gongluck/FFmpeg4.0-study.git #include <iostream> using namespace std ...

  7. 定时任务 Wpf.Quartz.Demo.1

    Quartz 是个开源的作业调度框架. 安装:Install-Package Quartz 官网文档地址:https://www.quartz-scheduler.net/documentation/ ...

  8. 【转】ABP使用Mysql数据库

    原文地址:https://www.cnblogs.com/LonelyCode/p/6477065.html 1.先安装Mysql的包,EntityFramework和Web项目都需要安装 2.修改W ...

  9. ovs QOS

    实验拓扑 拓扑实现脚本 ip netns add ns1 ip netns add ns2 ip netns add ns3 ip netns add ns4 ovs-vsctl add-br br0 ...

  10. 正则表达式中　re.match与re.search的区别

    标签: 本文和大家分享的主要是python正则表达式中re.match函数与re.search方法的相关用法及异同点,希望通过本文的分享,能对大家有所帮助. re.match函数 re.match 尝 ...