Bootstrap的图片轮播示例代码


Posted in Javascript onAugust 31, 2015

示例一:

插入js及css支持:

<link rel="stylesheet" href="css/bootstrap.min.css"/>  
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

HTML代码:

<div id="pictures" class="item">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播(Carousel)指标 -->
        <ol class="carousel-indicators">
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
         <li data-target="#myCarousel" data-slide-to="1"></li>
         <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>  
        <!-- 轮播(Carousel)项目 -->
        <div class="carousel-inner">
         <div class="item active">
           <img src="images/gf.jpg" class="img-responsive" alt="First slide">
         </div>
         <div class="item">
           <img src="images/psb.jpg" class="img-responsive" alt="Second slide">
         </div>
         <div class="item">
           <img src="images/uyt.jpg" class="img-responsive" alt="Third slide">
         </div>
        </div>
        <!-- 轮播(Carousel)导航 -->
        <a class="carousel-control left" href="#myCarousel" 
         data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" 
         data-slide="next">›</a>
      </div> 
    </div>

示例二:

用法

<div id="myCarousel" class="carousel slide">
 <!-- Carousel items -->
 <div class="carousel-inner">
  <div class="active item">…</div>
  <div class="item">…</div>
  <div class="item">…</div>
 </div>
 <!-- Carousel nav -->
 <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

所以,您把想要呈现的条目(比如 images)以循环顺序放置在 "carousel-inner" div 中,通过 "<!-- Carousel nav -->" 创建条目的导航。它使用定制的 data 属性 "data-slide" 来导航到上一个和下一个条目。

您必须在您要创建轮播的 HTML 文件引用 jquery.js bootstrap-carousel.js 文件。

Bootstrap 轮播实例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</title> 
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
 <ul class="pager">
 <li>
  <a href="#">Previous</a>
 </li>
 <li>
  <a href="#">Next</a>
 </li>
</ul>
</body>
</html>

 带有 old 和 new 的翻页实例           

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Example of carousal with Twitter Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Example of carousal with Twitter Bootstrap version 2.0 from w3resource.com">
   <!-- Le styles -->
  <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
 <link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
   <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- Le fav and touch icons -->
  <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
  <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
 </head>
 <body>
  <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </a>
     <a class="brand" href="#"><img src="/images/w3r.png" width="111" height="30" alt="w3resource logo" /></a>
     <div class="nav-collapse">
      <ul class="nav">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#about">About</a></li>
       <li><a href="#contact">Contact</a></li>
      </ul>
     </div><!--/.nav-collapse -->
    </div>
   </div>
  </div>
  <div class="container">
   <!-- Example row of columns -->
   <div class="row">
    <div class="span4">
     <h2>HTML5 and JS Apps</h2>
  <p> </p>
     <div id="myCarousel" class="carousel slide">
   <!-- Carousel items -->
  <div class="carousel-inner">
   <div class="active item"><img src="/update-images/html5_logo.png" alt="HTML5 logo" width="500" height="99" /></div>
   <div class="item"><img src="/update-images/javascript-logo.png" alt="JS logo" width="500" height="99" /></div>
   <div class="item"><img src="/update-images/schema.png" alt="Schema.org logo" width="500" height="99" /></div>
 <div class="item"><img src="/update-images/json.gif" alt="JSON logo" width="500" height="99" /></div>
 </div>
 <!-- Carousel nav -->
 <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
   <hr>
   <footer>
    <p>© Company 2012</p>
   </footer>
  </div> <!-- /container -->
  <!-- Le javascript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
  <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
 </body>
</html>

使用 Javascript

您可以使用下面的 JavaScript 代码来创建轮播。

$('.carousel').carousel()

下面是您可以使用的选项

interval: 规定幻灯片轮换的等待时间,以毫秒为单位。值的类型为 number,默认值是 5000。如果为 false,轮播将不会自动开始循环。

pause: 规定当鼠标停留在幻灯片区域即暂停轮播,鼠标离开即启动轮播。值的类型为 string,默认值是 'hover'。

下面是您可以使用的轮播方法

.carousel(options): 初始化轮播组件,接受一个可选的 object 类型的 options 参数,并开始幻灯片循环。
$('.carousel').carousel({
 interval: 2000 // in milliseconds
})
.carousel('cycle'): 从左到右循环各帧。
$('.carousel').carousel('cycle');
.carousel('pause'): 停止轮播。
$('#myCarousel').hover(function () { 
 $(this).carousel('pause') 
}
.carousel(number): 将轮播定位到指定的帧上(帧下标以0开始,类似数组)。
$("#carousel_nav").click(function(){ 
var item = 4; 
$('#home_carousel').carousel(item); 
return false; 
});

.carousel('prev'): 将轮播转到上一帧。

.carousel('next'): 将轮播转到下一帧。

这里有两个事件用来增强轮播的功能。

slide: 当 slide 实例方法被调用之后,此事件被立即触发。

slid: 当所有幻灯片播放完之后,此事件被触发。

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
JavaScript数组操作详解
Feb 04 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
Vue程序调试的方法
Jun 17 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 #Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 #Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 #Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 #Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 #Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 #Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
javascript eval函数深入认识
2009/02/21 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
js闭包用法实例详解
2016/12/13 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
常用python编程模板汇总
2016/02/12 Python
python实现图像识别功能
2018/01/29 Python
django中使用POST方法获取POST数据
2019/08/20 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Python 求向量的余弦值操作
2021/03/04 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
自荐信需注意事项
2014/01/25 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
办护照工作证明
2014/10/01 职场文书
小浪底导游词
2015/02/12 职场文书
保护校园环境倡议书
2015/04/28 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python