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 DOM 学习第二章 编辑文本
Feb 19 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
vue引用外部JS的两种种方法
Jan 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
php图片裁剪函数
2018/10/31 PHP
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python的Flask开发框架简单上手笔记
2015/11/16 Python
利用python求相邻数的方法示例
2017/08/18 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
python 内置函数汇总详解
2019/09/16 Python
了解一下python内建模块collections
2020/09/07 Python
python3处理word文档实例分析
2020/12/01 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
Overload和Override的区别
2012/09/02 面试题
国际会议邀请函范文
2014/01/16 职场文书
幼儿园门卫制度
2014/01/29 职场文书
行政监察建议书
2014/05/19 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python