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 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 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 进程锁定问题分析研究
2009/11/24 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
javascript的函数
2007/01/31 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
好的演讲稿开场白
2013/12/30 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
大型营销活动计划书
2014/04/28 职场文书
企业党员个人自我评价
2014/09/20 职场文书
教师批评与自我批评
2014/10/15 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android