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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
微信小程序 教程之事件
Oct 18 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
vue中如何实现变量和字符串拼接
Jun 19 Javascript
js中url对象化管理分析
Dec 29 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
js实现上传图片并显示图片名称
Dec 18 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
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
php递归函数怎么用才有效
2018/02/24 PHP
js创建元素(节点)示例
2014/01/02 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
药店主任岗位责任制
2014/02/10 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
情况说明书格式范文
2014/05/06 职场文书
中药学自荐信
2014/06/15 职场文书
书法社团活动总结
2015/05/07 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Python读取和写入Excel数据
2022/04/20 Python
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
基于Python编写一个监控CPU的应用系统
2022/06/25 Python