<!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. 解北大OJ1088滑雪问题的记录
			
    问题: Time Limit:1000MS   Memory Limit:65536K Total Submissions:67600   Accepted:24862 Description Mic ...
    
			
    2. 
						
  2. C++ Lambda表达式用法
			
    C++ 11中的Lambda表达式用于定义并创建匿名的函数对象,以简化编程工作. Lambda的语法形式如下: [函数对象参数] (操作符重载函数参数) mutable或exception声明 -&g ...
    
			
    3. 
						
  3. 关于在Eclipse中使用正则表达式替换的一点记录（使用正则表达式的分组）
			
    今天在工作中遇到了点替换的麻烦事,由于数据类进行了变动,具体情况是这样的,需要将下面的代码: player.skillData[i].name 替换为: player.skillData.getSki ...
    
			
    4. 
						
  4. [Windows驱动开发]（二）基础知识——数据结构
			
    本节主要介绍驱动开发的一些基础知识. 1. 驱动程序的基本组成 1.1. 最经常见到的数据结构 a. DRIVER_OBJECT驱动对象 // WDK中对驱动对象的定义 // 每个驱动程序都会有一个唯 ...
    
			
    5. 
						
  5. [置顶] 问题解决——XP线程池找不到QueueUserWorkItem
			
    2013年7月11号 主管让同事写一个并发100的小工具进行什么压力测试,据说是创建100个线程. 我表示这真真的是在坑人! 线程创建消耗资源,以自己的笔记本来跑这个东西,时间片都消耗在了线程切换上了 ...
    
			
    6. 
						
  6. Codeforces Round #250 (Div. 1) D. The Child and Sequence 线段树 区间取摸
			
    D. The Child and Sequence Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest ...
    
			
    7. 
						
  7. Android游戏开发之主角的移动与地图的平滑滚动
			
    人物移动地图的平滑滚动处理 玩过rpg游戏的朋友应该都知道RPG的游戏地图一般都比较大 今天我和大家分享一下在RPG游戏中如何来处理超出手机屏幕大小的游戏地图. 如图所示为程序效果动画图 地图滚动的原 ...
    
			
    8. 
						
  8. 【不怕坑】之 Node.js加密 C#解密
			
    本人也不太了解AES加密解密,为了解决Node.js加密,但是无法C#解密的问题,在网上搜了大量的相关文章. 但是多数是Node.js vs Java 或 Java vs C#的双向加密解密代码,但是 ...
    
			
    9. 
						
  9. nandsim ubi nand nor
			
    nandsim模拟mtd测试UBI模块 利用nandsim挂载ubi文件系统 MTD设备及JFFS2, UBIFS文件系统的使用简介 首先需要安装mtd_utils工具: sudo apt-get i ...
    
			
    10. 
						
  10. SQL Server 之 在与SQLServer建立连接时出现与网络相关的或特定于实例的错误
			
    背景:在用数据库时,打开SQL Server 2008 R2 的 SQL Server Management Studio,输入sa的密码发现,无法登陆数据库,提示信息如上: 解决方案: 1.打开Sq ...
    
			
    11.