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 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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 网页过期时间的控制代码
2009/06/29 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php object转数组示例
2014/01/15 PHP
php读取csc文件并输出
2015/05/21 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
php中错误处理操作实例分析
2019/08/23 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
如何在PHP中生成随机数
2020/06/04 PHP
javascript自启动函数的问题探讨
2013/10/05 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
python http基本验证方法
2018/12/26 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
会计顶岗实习心得
2014/01/25 职场文书
前台文员职责范本
2014/03/07 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
社区助残日活动总结
2014/08/29 职场文书
国庆横幅标语
2014/10/08 职场文书
联欢会开场白
2015/06/01 职场文书
现实表现证明材料
2015/06/19 职场文书
辞职申请书范本
2019/05/20 职场文书
python基础入门之字典和集合
2021/06/13 Python