<!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. [ASP.NET MVC] Child actions are not allowed to perform redirect
			
    我在Umbraco平台下,用MVC(SurfaceController)开发时,遇到这个问题 MemberEdit是一个partial View [HttpGet] [ActionName(" ...
    
			
    2. 
						
  2. CodeForces 706A Beru-taxi (数学计算，水题)
			
    题意:给定一个固定位置,和 n 个点及移动速度,问你这些点最快到固定点的时间. 析:一个一个的算距离,然后算时间. 代码如下: #pragma comment(linker, "/STACK ...
    
			
    3. 
						
  3. Http Header Content-Disposition
			
    Content-Disposition用途 Content-Disposition是为了实现服务器下载文件功能,并可提供文件名. Content-Disposition格式 content-dispo ...
    
			
    4. 
						
  4. 求一列的和，awk和perl哪个快？
			
    下午和群里的朋友争论了一下,有关awk和perl处理文本的速度,自己一直比较推崇perl,对awk知之甚少,结果就想当然的觉得perl快,结果一番争吵后,觉得还是实验一下靠谱,(其实是想证明一下per ...
    
			
    5. 
						
  5. 8086、80x86（IA-32）、64(IA-64)位CPU发展
			
    众所周知,CPU(中央处理单元)是计算机的核心部分,CPU在单位时间内能一次处理的二进制数的位数叫字长,从386.486直到奔腾系列的CPU都是32位,大多数情况32位计算已经能满足现阶段人们的需要. ...
    
			
    6. 
						
  6. Android下结束进程的方法
			
    转自:http://www.cnblogs.com/crazypebble/archive/2011/04/05/2006213.html 最近在做一个类似与任务管理器的东西,里面有个功能,可以通过这 ...
    
			
    7. 
						
  7. maven for eclipse在线安装
			
    在线安装 地址变了下面的: http://download.eclipse.org/technology/m2e/releases      Eclipse Indigo安装Maven插件Maven  ...
    
			
    8. 
						
  8. VM中ubuntu已经正确配置了静态IP仍无法上网
			
    情况描述:正确配置了ubuntu的IP,getway,DNS..无法ping通getway. 环境:宿主机:win7 32Bit  虚拟机:ununtu 10.04  VM:9.0.1 build-8 ...
    
			
    9. 
						
  9. Codeforces Gym 100610 Problem A. Alien Communication Masterclass 构造
			
    Problem A. Alien Communication Masterclass Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codefo ...
    
			
    10. 
						
  10. .NET中的三种Timer的区别和用法
			
    最近正好做一个WEB中定期执行的程序,而.NET中有3个不同的定时器.所以正好研究研究.这3个定时器分别是: //1.实现按用户定义的时间间隔引发事件的计时器.此计时器最宜用于 Windows 窗体应 ...
    
			
    11.