Bootstrap轮播图的使用和理解4


Posted in Javascript onDecember 14, 2016

本文实例为大家分享了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">
 <title>Bootstrap 模板</title>
 <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
 <!--[if lt IE 9]>
 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 
 <style>
 img {
 width: 100%;
 height: 100%;
 }
 p {
 text-align: center;
 }
 </style>
 </head>
 <body>
 <!-- 轮播图部分 -->
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <!-- 指示器 -->
 <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>
 </ol>

 <!-- Wrapper for slides -->
 <!-- 包裹幻灯片 -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
  <img src="images/轮播1.png" alt="轮播图1">
  <div class="carousel-caption">
  轮播图1
  </div>
 </div>
 <div class="item">
  <img src="images/轮播2.png" alt="轮播图2">
  <div class="carousel-caption">
  轮播图2
  </div>
 </div>
 <div class="item">
  <img src="images/轮播3.png" alt="轮播图3">
  <div class="carousel-caption">
  轮播图3
  </div>
 </div>
 <p>轮播图尝试</p>
 </div>

 <!-- Controls -->
 <!-- 控制 -->
 <!-- 向左滑动 -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></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>

 <!-- js控制轮播图 -->
 <button id="prev">向前</button>
 <button id="next">向后</button>
 <button id="pause">停止</button>
 <button id="start">开始</button>
 <button id="jump">到第二张</button>

 <script src="lib/jquery/jquery.js"></script>
 <script src="lib/bootstrap/js/bootstrap.js"></script>
 <!-- 轮播图还支持js控制 -->
 <script>
 $(function(){
 $('.carousel').carousel({
  interval: 2000,//轮播间隔
  pause:"hover", //鼠标悬停在轮播图上,是否停止滚动
  wrap:true, //
  keyboard:true //响应键盘事件
 });

 $("#prev").click(function(event) {
  $('.carousel').carousel('prev')// 周期上一个项目。
 });

 $("#next").click(function(event) {
  $('.carousel').carousel('next')// 周期到下一个项目。
 });;

 $("#pause").click(function(event) {
  $('.carousel').carousel('pause')// 从通过项目循环停止传送带。
 });;

 $("#start").click(function(event) {
  $('.carousel').carousel('cycle')// 通过传送带项目周期从左到右。
 });;

 $("#jump").click(function(event) {
  $('.carousel').carousel(1)// 循环传送带到一个特定的帧(0为主,类似于数组)。
 });;


 });
 </script>
 </body>
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
DIV始终居中的js代码
Feb 17 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 #Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 #Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 #Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 #Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 #Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 #Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 #Javascript
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php 购物车的例子
2009/05/04 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
简单了解django文件下载方式
2020/02/10 Python
python导入库的具体方法
2020/06/18 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书