<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap轮播图</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<style>
#slidershow{
width: 300px;
height: 220px;
margin: 50px auto;
}
img{
width: 300px;
height: 220px;
}
</style>
</head>
<body>
<!--#slidershow 层添加 slide 样式,使用图片与图片切换效果有平滑感-->
<div id="slidershow" class="carousel slide" data-ride="carousel" data-wrap="true" data-pause="hover" data-interval="2000">
<!-- 设置图片轮播的顺序carousel-indicators -->
<ol class="carousel-indicators">
<li class="active" data-toggle="#slideshow" data-side-to="0"></li>
<li data-toggle="#slideshow" data-side-to="1"></li>
<li data-toggle="#slideshow" data-side-to="2"></li>
<li data-toggle="#slideshow" data-side-to="3"></li>
</ol>
<!--设置轮播图片carousel-inner-->
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="data:images/1.jpeg" alt="熊本熊"></a>
<!--图片描述carousel-caption-->
<div>
<h3 class="carousel-caption">熊本熊</h3>
<p>超可爱的熊熊</p>
</div>
</div>
<div class="item">
<a href="#"><img src="data:images/2.jpg" alt="熊本熊"></a>
</div>
<div class="item">
<a href="#"><img src="data:images/3.jpeg" alt="熊本熊"></a>
</div>
<div class="item">
<a href="#"><img src="data:images/4.jpg" alt="熊本熊"></a>
</div>
</div>
<!--设置轮播图控制器carousel-control-->
<a class="left carousel-control" href="#slidershow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

以上使用声明式的方法实现轮播

声明式方法是通过定义 data 属性来实现,data 属性可以很容易地控制轮播的位置。其主要包括以下几种:

  • data-ride 属性:取值 carousel,并且将其定义在 carousel 上。
  • data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如前面示例所示,取值为“#slidershow”,并且将其定义在轮播图计数器的每个 li 上。
  • data-slide 属性:取值包括 prev,next,prev表示向后滚动,next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
  • data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to="2",可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个 li 上。

如果没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap轮播图</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<style>
#slidershow{
width: 300px;
height: 220px;
margin: 50px auto;
}
img{
width: 300px;
height: 220px;
}
</style>
</head>
<body>
<!--#slidershow 层添加 slide 样式,使用图片与图片切换效果有平滑感-->
<!--<div id="slidershow" class="carousel slide" data-ride="carousel" data-wrap="true" data-pause="hover" data-interval="1000">-->
<!--注意,下面这句代码比上有变动-->
<div id="slidershow" class="carousel slide">
<!-- 设置图片轮播的顺序carousel-indicators -->
<ol class="carousel-indicators">
<li class="active" data-toggle="#slideshow" data-side-to="0"></li>
<li data-toggle="#slideshow" data-side-to="1"></li>
<li data-toggle="#slideshow" data-side-to="2"></li>
<li data-toggle="#slideshow" data-side-to="3"></li>
</ol>
<!--设置轮播图片carousel-inner-->
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="data:images/1.jpeg" alt="熊本熊"></a>
<!--图片描述carousel-caption-->
<div>
<h3 class="carousel-caption">熊本熊</h3>
<p>超可爱的熊熊</p>
</div>
</div>
<div class="item">
<a href="#"><img src="data:images/2.jpg" alt="熊本熊"></a>
</div>
<div class="item">
<a href="#"><img src="data:images/3.jpeg" alt="熊本熊"></a>
</div>
<div class="item">
<a href="#"><img src="data:images/4.jpg" alt="熊本熊"></a>
</div>
</div>
<!--设置轮播图控制器carousel-control-->
<a class="left carousel-control" href="#slidershow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script>
$(function () {
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function () {
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function () {
$(".carousel").carousel("next");
})
})
</script>
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

Bootstrap插件-carousel(轮播图)的更多相关文章

  1. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  2. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  3. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  4. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  5. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  6. iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  7. layui常用插件(一) 轮播图

    轮播图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ht ...

  8. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  9. Carousel轮播图

     <div id="carousel-example-generic" class="carousel slide" data-ride="ca ...

随机推荐

  1. C++中栈结构建立和操作

    什么是栈结构 栈结构是从数据的运算来分类的,也就是说栈结构具有特殊的运算规则,即:后进先出. 我们可以把栈理解成一个大仓库,放在仓库门口(栈顶)的货物会优先被取出,然后再取出里面的货物. 而从数据的逻 ...

  2. This account is currently not available

    今天在linux下切换用户发现提示This account is currently not available,说是无效用户了后来网上查了一下发现是用户的shell禁止登录了,解决方法只要开启she ...

  3. win7 eclipse连接hadoop2.x开发环境搭建

    环境: hadoop-2.3.0-cdh5.1.0 centos 6.5 x64 win7 eclipse4.3 0. 前提条件 ,jdk,maven要安装好. 1.下载hadoop,用winRAR解 ...

  4. 31、SAM文件中flag含义解释工具--转载

    转载:http://www.cnblogs.com/nkwy2012/p/6362996.html  SAM是Sequence Alignment/Map 的缩写.像bwa等软件序列比对结果都会输出这 ...

  5. MVC项目中的分页实现例子

    在开发项目中,写了一个分页实现的例子,现在把源代码贴上,以供以后写代码时参考 在列表的头部,有如下显示, 这个代表一个页面显示10条记录,总共22条记录. 这个是页面底部的显示 那么如何来显示这个分页 ...

  6. synchronized关键字的作用域

    转自:http://www.cnblogs.com/devinzhang/archive/2011/12/14/2287675.html 1.synchronized关键字的作用域有二种: 1)是某个 ...

  7. Unity -- AssetBundle(本地资源加载和加载依赖关系)

    1.本地资源加载 1).建立Editor文件夹 2).建立StreamingAssets文件夹和其Windows的子文件夹 将下方第一个脚本放入Editor 里面 脚本一  资源打包AssetBund ...

  8. asp.net core系列 64 结合eShopOnWeb全面认识领域模型架构

    一.项目分析 在上篇中介绍了什么是"干净架构",DDD符合了这种干净架构的特点,重点描述了DDD架构遵循的依赖倒置原则,使软件达到了低藕合.eShopOnWeb项目是学习DDD领域 ...

  9. Java web错误汇总

    环境: 电脑:win 10 IDE: Eclipse Java EE IDE for Web Developers. Version: Luna Service Release 2 (4.4.2) B ...

  10. SQL数据库操作整理

    1.规范 ①关键字与函数名称全部大写: ②数据库名称.表名称.字段名称全部小写: ③SQL语句必须以分号结尾. 2.数据库操作 // 1. 创建数据库,其中[]表示可以省略 CREATE { DATA ...