bootstrap轮播图示例代码分享


Posted in Javascript onMay 17, 2017

本文实例为大家分享了bootstrap轮播图的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>XXX</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
 <link rel="stylesheet" href="css/main.css"> 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
<!--轮播器 
 1、给最外层添加 :id="myCarousel" class="carousel slide" 
 2、给轮播器3张图片的最外层div添加 :class="carousel-inner" 给每张图片的父div添加 class="item" 
  并且第一张首选 加active 
 3、给ol添加class="carousel-indicators" 然后每个li添加绑定 data-target="#myCarousel" 
   data-slide-to=0,1,2 并且第一个首选 加active 
 4、限定宽度和图片一样宽,给最外层div添加 style="width: 900px;" (900为图片宽度) 
 5、给两边控制按钮的第一个加上:href="#myCarousel" class="left carousel-control" data-slide="prev" 
  第二个加上 href="#myCarousel" class="right carousel-control" data-slide="next" 
 --> 
<div id="myCarousel" class="carousel slide" style="width: 900px;">      
<!--data-ride="carousel"--> 
<!--<div id="myCarousel" class="carousel slide" style="width: 900px;" data-ride="carousel">-->
<!--自动轮播,默认5秒--> 
 <ol class="carousel-indicators"><!--轮播器中间3个点--> 
  <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> 
 <div class="carousel-inner"><!--轮播器3张图片--> 
  <div class="item active"> 
   <img src="img/slide1.png" alt="第1张图片"> 
   <div class="carousel-caption"> <!--可以给轮播图添加文字--> 
    <h3>标题</h3> 
    <p>我是内容</p> 
   </div> 
  </div> 
  <div class="item"> 
   <img src="img/slide2.png" alt="第2张图片"> 
  </div> 
  <div class="item"> 
   <img src="img/slide3.png" alt="第3张图片"> 
  </div> 
 </div> 
 <!--轮播器两边控制按钮--> 
 <a href="#myCarousel" class="left carousel-control" data-slide="prev"> 
  <span class="glyphicon glyphicon-chevron-left"></span> 
 </a> 
 <a href="#myCarousel" class="right carousel-control" data-slide="next"> 
  <span class="glyphicon glyphicon-chevron-right"></span> 
 </a> 
</div> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
<script> 
// $('#myCarousel').carousel();/*自动轮播,默认5秒*/ 
 
 
 
 $('#myCarousel').carousel({ 
  interval:3000 , /* 设置自动轮播时间*/ 
  pause:'hover',/*设置暂停事件,默认就是鼠标移入轮播图就暂停,移出继续,所以可以不用写*/ 
  /*wrap:false*/ /*只播一次,默认true,循环一直轮播*/ 
 }); 
 
 
 
 /*其他方法 
 * cycle 循环各帧(默认从左到右) 
  pause 停止轮播 
  number 轮播到指定的图片上(小标从 0 开始,类似数组) 
  prev 循环轮播到上一个项目 
  next 循环轮播到下一个项目 
 * 
 * 
 * //点击按钮执行 
  $('button').on('click', function () { 
  //点击后,自动播放 
  $('#myCarousel').carousel('cycle'); 
  //其他雷同 
  } 
 * */ 
 
 
//事件 
$('#myCarousel').on('slide.bs.carousel', function () { 
 alert('当调用 slide 实例方式时立即触发'); 
}); 
$('#myCarousel').on('slid.bs.carousel', function () { 
 alert('当轮播完成一个幻灯片触发'); 
}); 
</script> 
</body> 
 
</html>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
jquery延迟对象解析
Oct 26 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
JS正则表达式验证中文字符
May 08 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
用js实现放大镜效果
Oct 28 Javascript
bootstrap警告框示例代码分享
May 17 #Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 #Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 #Javascript
原生JS实现层叠轮播图
May 17 #Javascript
JavaScript手风琴页面制作
May 17 #Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
You might like
apache和PHP如何整合在一起
2015/10/12 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
js实现筛选功能
2020/11/24 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Django-imagekit的使用详解
2020/07/06 Python
Numpy数组的广播机制的实现
2020/11/03 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
留学自荐信的技巧
2013/10/17 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
运动会通讯稿400字
2014/01/28 职场文书
土木工程求职信
2014/05/29 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android