bootstrap图片轮播插件carousel
来源:互联网 发布:单片机开发案例 编辑:程序博客网 时间:2024/05/15 05:38
start:需要引入bootstrap轮播插件 carousel.js 或者直接引入bootstrap.min.js
基本原理:
第一步:设置图片轮播的容器。---其他内容都需要放置在这个容器里
采用carousel样式,给这个容器一个ID值,方便后面采用data属性触发。
<div id="demo" class="carousel"></div>
第二步:设置图片轮播计数器。
在容器div.carousel的内部添加图片轮播计时器,采用carousel-indicators样式,一般用ol有序列表(有几张图片放置几个li),以白点的形式展示(具体样式在bootstrap.css文件第5835行起)
<div id="demo" class="carousel"> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol></div>
第三步:设置轮播图片播放区
最关键的区域,主要用来放置需要轮播的图片,用carousel-inner样式控制,用item容器放置每张轮播的图片。
<div id="demo" class="carousel"> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol> <div class="carousel-inner"> <div class="item"> <img src="img/indexLsit04.png"> </div> <div class="item"> <img src=""> </div> </div></div>
第四步:设置图片轮播控制器
一般图片轮播会有一个向前向后播放的控制器,在此,用carousel-control样式配合left、right来实现。
<div id="demo" class="carousel"> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol> <div class="carousel-inner"> <div class="item"> <img src="img/indexLsit04.png"> </div> <div class="item"> <img src=""> </div> </div> <a class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div>
demo:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/> <!-- 解决兼容问题--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <!-- 搜索引擎--> <meta name="keywords" content="bootstrap,css,html"> <script src="js/jquery-3.1.0.min.js"></script> <!-- jquery在前边,bootstrap依赖jQuery--> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="icon" href="favicon.icon"> <title></title> <style> #slidershow{ width: 300px; height: 300px; margin: 100px 400px; } img{ width: 300px; height: 300px; } </style></head><body><div id="slidershow" class="carousel slide"><!-- 图片轮播 的容器--> <!-- 设置图片轮播计数器 图片轮播的顺序--> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> <li data-target="#slidershow" data-slide-to="3"></li> <li data-target="#slidershow" data-slide-to="4"></li> </ol> <!-- 设置轮播图片播放区 --> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="img/indexLsit01.png" alt="First slide"></a> </div> <div class="item"><a href="#"><img src="img/indexLsit02.png" alt="2 slide"></a></div> <div class="item"><a href="#"><img src="img/indexLsit03.png" alt="3 slide"></a></div> <div class="item"><a href="#"><img src="img/indexLsit04.png" alt="4 slide"></a></div> <div class="item"><a href="#"><img src="img/indexLsit05.png" alt="5 slide"></a></div> </div> <!-- 设置图片轮播控制器 --> <a class="left carousel-control " href="#slidershow" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control " href="#slidershow" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div><!-- 图片轮播 的容器--></body></html>
0 0
- bootstrap图片轮播插件carousel
- Bootstrap Carousel(轮播插件)
- Bootstrap 轮播(Carousel)插件
- Bootstrap 轮播(Carousel)插件
- Bootstrap 轮播(Carousel)插件
- 【Bootstrap】图片轮播组件Carousel
- bootstrap 旋转木马carousel 图片轮播
- Bootstrap的js插件之轮播(carousel)
- bootstrap中jquery插件——Carousel轮播广告
- bootstrap之 carousel.js轮播插件源码分析
- Bootstrap之轮播 carousel
- Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js
- 可滑动切换的图片轮播——bootstrap中的carousel插件,hammer.js,jquery.hammer.js
- bootstrap轮播(carousel)图片竖着显示不能轮播的问题解决办法
- 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
- Bootstrap插件(八)——轮播(Carousel.js)
- bootstrap中的carousel插件
- 修改bootstrap中幻灯片carousel的轮播时间
- 数字签名原理简介
- 以不变应万变-- 如何根据你的Apache+php版本进行正确的Xdebug配置
- CSS3——box-sizing\background-size\box-shadow
- OkHttpUtils - 封装了okhttp的网络框架
- 在Android studio中保存密匙
- bootstrap图片轮播插件carousel
- 如何配置Hibernate连接oracle12c 的PDB和CDB数据库
- 分享一个架构师网站
- HttpServletRequest
- ASP.NET 在请求中检测到包含潜在危险的数据----MVC
- 面试题:数组中出现次数超过一半的数字
- 构建高性能web应用 .net
- iOS巅峰之开发过程中的小知识点大全
- 后台数据传入前端乱码问题