<!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. 贪心-poj-2437-Muddy roads
			
    题目链接: http://poj.org/problem?id=2437 题目意思: 给n个区间,每次可以用长度为L的棒A去覆盖,求将所有区间覆盖至少需要几次.给的区间不覆盖. 解题思路: 简单贪心. ...
    
			
    2. 
						
  2. OpenNebula config配置详情
			
    AUTH_MAD=AUTHN=ssh,x509,ldap,server_cipher,server_x509,EXECUTABLE=one_auth_mad DATASTORE_BASE_PATH=/ ...
    
			
    3. 
						
  3. Oracle-11g 数据库启动时，报错"ORA-01092"及"ORA-18008: cannot find OUTLN schema"
			
    适用情形: Oracle-11g 数据库启动时,出现类似如下错误. ORA-01092: ORACLE instance terminated. Disconnection forced ORA-18 ...
    
			
    4. 
						
  4. assert函数(python)
			
    assert语句: 用以检查某一条件是否为True,若该条件为False则会给出一个AssertionError. 用法: assert type(x)=int and x>=0 如果不满足后面 ...
    
			
    5. 
						
  5. HDU 4813 Hard Code 水题
			
    Hard Code Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.act ...
    
			
    6. 
						
  6. URAL 1779 F - The Great Team 构造
			
    F - The Great TeamTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest ...
    
			
    7. 
						
  7. centos x86_64--------------------------------系统调用
			
    http://blog.csdn.net/hmsiwtv/article/details/11022241 [root@monitor ~]# cat /usr/include/asm/unistd. ...
    
			
    8. 
						
  8. 从B树、B+树、B*树谈到R 树
			
    从B 树.B+ 树.B* 树谈到R 树 作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由 ...
    
			
    9. 
						
  9. TortoiseGit安装教程
			
    TortoiseGit 是Windows下的可视化Git界面. 下载Git 网站地址: http://code.google.com/p/tortoisegit/ 安装前必须装上msysgit才能在W ...
    
			
    10. 
						
  10. spring4.x注解概述
			
    1. 背景 注解可以减少代码的开发量,spring提供了丰富的注解功能,因项目中用到不少注解,因此下定决心,经spring4.x中涉及到的注解罗列出来,供查询使用. 2. spring注解图      ...
    
			
    11.