bootstrap图片轮播插件carousel
2016-11-18 13:51
627 查看
start:需要引入bootstrap轮播插件 carousel.js
或者直接引入bootstrap.min.js
基本原理:
第一步:设置图片轮播的容器。---其他内容都需要放置在这个容器里
采用carousel样式,给这个容器一个ID值,方便后面采用data属性触发。
第二步:设置图片轮播计数器。
在容器div.carousel的内部添加图片轮播计时器,采用carousel-indicators样式,一般用ol有序列表(有几张图片放置几个li),以白点的形式展示(具体样式在bootstrap.css文件第5835行起)
第三步:设置轮播图片播放区
最关键的区域,主要用来放置需要轮播的图片,用carousel-inner样式控制,用item容器放置每张轮播的图片。
第四步:设置图片轮播控制器
一般图片轮播会有一个向前向后播放的控制器,在此,用carousel-control样式配合left、right来实现。
demo:
呈现出的样式:
或者直接引入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>
呈现出的样式:
相关文章推荐
- bootstrap轮播插件carousel图片切换移动速度自定义
- 可滑动切换的图片轮播——bootstrap中的carousel插件,hammer.js,jquery.hammer.js
- Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js
- bootstrap 学习笔记 轮播(Carousel)插件
- 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
- Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
- Bootstrap 轮播(Carousel)插件
- Bootstrap 轮播(Carousel)插件
- Bootstrap中的Carousel插件的图片滚动时间间隔的设置
- Bootstrap 轮播(Carousel)插件
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
- bootstrap carousel轮播插件常见问题不自动播放
- bootstrap 旋转木马carousel 图片轮播
- Bootstrap 轮播(Carousel)插件
- 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
- 【Bootstrap】图片轮播组件Carousel
- Bootstrap 轮播(Carousel)插件
- Bootstrap 历练实例-轮播(carousel)插件的事件
- 【转】让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
- Bootstrap图片轮播组件Carousel使用方法详解