首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

成兮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue仿element实现分页器效果
Sep 13 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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
内置模块(1) 全局锁(1) 限流(2) 备份(2) 限速(1) 数据库卡死(1) IP(1) update(2) 递归(1) tcp/ip(1)
You might like
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
laravel框架中路由设置，路由参数和路由命名实例分析
2019/11/23 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
在一般处理程序（ashx）中弹出js提示语
2017/08/16 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
JS实现页面数据懒加载
2020/02/13 Javascript
js代码实现轮播图
2020/05/04 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
购买大码女装：Lane Bryant
2016/09/07 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
中学生评语大全
2014/04/18 职场文书
目标责任书格式
2014/07/28 职场文书
检讨书大全
2015/01/27 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
干部考核工作总结2015
2015/07/24 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers