<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--引入boorstrap的css文件-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--在引入bootstrap的js文件之前 引入jquery文件，因为bootstrap是依赖于jquery的 -->
<script src="jquery-1.11.2.min.js"></script>
<!--引入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<title>carousel轮播效果</title>
<script>
/**
         * 幻灯播放效果的选项
         */
$(function () {
$(".carousel").carousel({
interval:3000,      //设置轮播切换速度
keyboard:true,   //设置是否启用鼠标控制图片轮播切换
pause:"hover",   //鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap:true      //设置是否循环播放
});
        });

/**
         *以下是一些常用的方法
         */
$(function () {
//开始轮播
$("#start").click(function() {
$("#carousel-example-generic").carousel('cycle');
            });

//暂停播放
$("#pause").click(function() {
$("#carousel-example-generic").carousel('pause');
            });

//上一张
$("#prev").click(function() {
$("#carousel-example-generic").carousel('prev');
            });

//下一张
$("#prev").click(function() {
$("#carousel-example-generic").carousel('next');
            });

//跳至第三张（下标从0开始）
$("#toThree").click(function() {
$("#carousel-example-generic").carousel(2);
            });

        });
</script>
</head>
<body>
<!--data-ride="carousel"属性用于控制是否在页面加载时就开始播放动画 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<!--
    轮播的指标（下方的小圆点）
    使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
     -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<!-- 轮播的项目，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 -->
<div class="carousel-inner" role="listbox">
<!--class=item属性的div中一定要有一个div的class属性为active，不然轮播项目不可见 -->
<div class="item active">
<img src="data:images/pic1.png" alt="..." style="width: 100%;height: 500px;">
<!--下面的div中可以放置任何我们想放置的内容 -->
<div class="carousel-caption">
<h1>First slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>
<div class="item">
<img src="data:images/pic2.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Second slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>

<div class="item">
<img src="data:images/pic3.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Third slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>

<div class="item">
<img src="data:images/pic4.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Fourth slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>

</div>

<!--
    轮播的控制导航
    data-slide：接受prev、next关键字，用于控制幻灯片相对于当前的位置
     -->
<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>
<!--控制按钮 -->
<div style="text-align: center;">
<input type="button" class="btn btn-default" id="start" value="开始"/>
<input type="button" class="btn btn-default" id="pause" value="暂停"/>
<input type="button" class="btn btn-default" id="prev" value="上一个"/>
<input type="button" class="btn btn-default" id="next" value="下一个"/>
<input type="button" class="btn btn-default" id="toThree" value="跳至第三个"/>
</div>

</body>
</html>




效果图：








												


											
Bootstrap插件之Carousel轮播效果（2015年-05月-21日）的更多相关文章
	

    
								
  1. Bootstrap之Footer页尾布局（2015年05月28日）
		
    直接上页尾部分的代码: <!--采用container-fluid,使得整个页尾的宽度为100%,并设置它的背景色--><footer class="container-f ...
    
		
    2. 
						
  2. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
		
    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
    
		
    3. 
						
  3. js插件-图片椭圆轮播效果
		
    插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg"  ...
    
		
    4. 
						
  4. Bootstrap简单Demo（2015年05月-18日）
		
    Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...
    
		
    5. 
						
  5. 初识CSS3之媒体查询（2015年05月31日）
		
    一.什么是媒体查询 媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各 ...
    
		
    6. 
						
  6. 初识Less（2015年05月23日）
		
    因为最近在研究Bootstrap,然后才了解到Less,听说Less很强大,又听说Bootstrap+Less会更搭,所以就决定也顺带了解下Less的相关知识. come  on...... 一.简介 ...
    
		
    7. 
						
  7. 1、关于Boolean（2015年05月30日）
		
    背景:刚在看Effective Java,看到一段关于Boolean提供一个返回实例的静态方法的例子,便去看了下Boolean的源码,发现有些内容是之前没注意到的,于是便有了下面这些. 1. Bool ...
    
		
    8. 
						
  8. java之enum枚举（2015年05月28日）
		
    背景: 今天启动了一个新的项目,由于要从之前的旧项目中拿过来一些代码,所以就看了下公司之前项目代码,发现有定义的常量类,也有枚举类,然后就在想着两者的功能差不多,那他们之间到底有什么区别呢,所以就决定 ...
    
		
    9. 
						
  9. 实用工具推荐（Live Writer）（2015年05月26日）
		
    1.写博客的实用工具 推荐软件:Live Writer 使用步骤: 1.安装 Live Essential 2011,下载地址:http://explore.live.com/windows-live ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux vmstat：报告虚拟内存统计的工具
			
    众所周知,计算机必须有称之为RAM(随机访问内存)的存储器使得计算机工作.RAM指的是插在计算机主板上的物理存储.这里的RAM被用于加载像浏览器.文字处理器这类的程序,实际上,你使用的程序都运行在内存 ...
    
			
    2. 
						
  2. 虚拟攻防系统 HoneyPot
			
    转载原地址 http://www.2cto.com/Article/200410/9.html Honeypot 是一个故意设计为有缺陷的系统,通常是用来对入侵者的行为进行警报或者 诱骗.传统的 Ho ...
    
			
    3. 
						
  3. 前端的一些常用DOM和事件归纳
			
    1.document.getElementById(id); document.getElementByTagName(tagName);       document.getElementsByNa ...
    
			
    4. 
						
  4. Unity3D之UGUI学习笔记（二）：Rect Transform与Anchor
			
    Rect Transform 我们都知道,Unity3D中所有的GameObject都必须要携带一个Transform组件,且该组件无法移除,那么作为UI显示的GameObject则不是携带Trans ...
    
			
    5. 
						
  5. jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究
			
    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
    
			
    6. 
						
  6. MFC视图切换大全总结
			
    单纯视图之间的切换 单文档多视图切换是我在学习MFC中遇到的一个老大难问题,在今天总算是一一破解了.我觉得视图切换分为三个等级,第一是在未切分窗格的情况下切换视图类:第二是在分割窗格的一个窗格内实行视 ...
    
			
    7. 
						
  7. 关于MVC中DropDownListFor的一个bug
			
    如以下代码: //后台 代码 ViewData["source_type"] = new List<SelectListItem> { "}, "} ...
    
			
    8. 
						
  8. 理解extern
			
    extern有两层含义:表示声明和extern C 1.C++分为编译期和运行期,C++是分别单独编译,编译期可认为有三个步骤:a.预编译进行文本替换,将源文件(cpp文件)生成编译单元:b.编译单元 ...
    
			
    9. 
						
  9. QM课程02-外部功能
			
    质量计划 · 对质量计划和检验计划进行基本数据的管理 · 物料说明 · 检验计划 质量检验 · 触发检验 · 具有检验计划选择和样本计算的检验处理 · 打印采样和检验的车间文档 · 记录结果和缺陷 · ...
    
			
    10. 
						
  10. 批量导出表数据到CSV文件
			
    需求:把oracle数据库中符合条件的N多表,导出成csv文本文件,并以表名.csv为文件名存放. 实现:通过存储过程中UTL_FILE函数来实现.导出的csv文件放入提前创建好的directory中 ...
    
			
    11.