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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
JS二分查找算法详解
Nov 01 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
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会话(session)说明介绍
2016/08/21 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js 提交和设置表单的值
2008/12/19 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
js切换光标示例代码
2013/10/10 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
node 版本切换的实现
2020/02/02 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python list和str互转的实现示例
2020/11/16 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
《小动物过冬》教学反思
2014/04/17 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis