Bootstrap实现基于carousel.js框架的轮播图效果


Posted in Javascript onMay 02, 2017

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

声明式触发需要使用到的几个data-*属性

1.data-ride:作用在最外层容器上,固定值:carousel
2.data-target:作用在class=carousel-indicators的每个子元素li上面,标注对那个元素进行点击轮播
3.data-slide:作用在前翻页和后翻页的两个a链接上,prev表示前翻页,next表示后翻页
4.data-slide-to:作用在class=carousel-indicators的每个子元素li上面,标注对应的li元素对应的图片动画帧的下标,从0开始
5.data-interval:轮番图自动轮播的等待时间,如果为false则不自动轮播,默认为5000ms
6.data-pause:指定鼠标停留在轮换图上是否停止轮播,离开后继续自动轮播
7.data-wrap:指定是否持续轮播

轮播图代码实现:

<!Doctype html>
<html>
 <head>
  <title>登录界面-bootstrap打造前端--美观高大上-成兮制作</title>

  <!-- meta -->
  <meta http-equiv="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <!-- ICON Link -->
  <link rel="shorticon" type="image/x-icon" href="Images/webicon.ico" rel="external nofollow" rel="external nofollow" />
  <link rel="icon" type='image/x-icon' href="Images/webicon.ico" rel="external nofollow" rel="external nofollow" />

  <!--Bootstrap CSS Link-->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" />
  <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css" rel="external nofollow" />

  <!-- Bootstrap JS and JQuery JS Link -->
  <script src="JS/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>

 </head>
 <body>
  <!-- 制作巨幕轮播图 -->
  <div class="carousel" id="carouselcontainer" data-ride="carousel" style="background-color: rgba(128, 128, 128, 0.42);margin-top: 10%;width: 100%;height:658px;">
   <ol class="carousel-indicators">
    <li class="active" data-target="#carouselcontainer" data-slide-to="0"></li>
    <li data-target="#carouselcontainer" data-slide-to='1'></li>
    <li data-target="#carouselcontainer" data-slide-to="2"></li>
    <li data-target="#carouselcontainer" data-slide-to="3"></li>
   </ol>
   <div class="carousel-inner">
    <div class="item active">
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img src="Images/1.png" title="巨幕轮播图1" style="width: 100%;height: 658px;" />
     </a>
    </div>
    <div class="item">
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img src="Images/1.jpg" title="巨幕轮播图2" style="width: 100%;height: 658px;" />
     </a>
    </div>
    <div class="item">
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img src="Images/2.jpg" title="巨幕轮播图3" style="width: 100%;height: 600px;" />
     </a>
    </div>
    <div class="item">
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img src="Images/3.jpg" title="巨幕轮播图4" style="width: 100%;height: 600px;" />
     </a>
    </div>
   </div>
   <div class="left carousel-control" href="#carouselcontainer" rel="external nofollow" rel="external nofollow" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
   </div>
   <div class="right carousel-control" href="#carouselcontainer" rel="external nofollow" rel="external nofollow" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
   </div>
  </div>
 </body>
</html>

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

Javascript 相关文章推荐
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 #Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 #Javascript
jQuery树插件zTree使用方法详解
May 02 #jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 #Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 #Javascript
详解webpack+es6+angular1.x项目构建
May 02 #Javascript
jQuery Tree Multiselect使用详解
May 02 #jQuery
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
PHP强制转化的形式整理
2020/05/22 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python的exec、eval使用分析
2017/12/11 Python
Python实现Linux监控的方法
2019/05/16 Python
python中什么是面向对象
2020/06/11 Python
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
IBatis持久层技术
2016/07/18 面试题
初三学生语文考试作弊检讨书
2014/12/14 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书