<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>轮播插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- data-ride="carousel" 自动轮播 --> <div id="myCarousel" class="carousel slide" style="width: 900px;"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/slide1.png" alt="第一张"> </div> <div class="item"> <img src="img/slide2.png" alt="第二张"> </div> <div class="item"> <img src="img/slide3.png" alt="第三张"> </div> </div> <!-- <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a> <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a> --> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $('#myCarousel').carousel({ interval : 2000, // pause : 'hover', // wrap : false, }); </script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>轮播插件2</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- data-ride="carousel" 自动轮播 --> <div id="myCarousel" class="carousel slide" style="width:900px"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/slide1.png" alt="第一张"> </div> <div class="item"> <img src="img/slide2.png" alt="第二张"> </div> <div class="item"> <img src="img/slide3.png" alt="第三张"> </div> </div> <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a> <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a> </div> <button id="cycle" class="btn btn-default">开始</button> <button id="pause" class="btn btn-default">停止</button> <button id="number" class="btn btn-default">播放第三条</button> <button id="prev" class="btn btn-default">上一个</button> <button id="next" class="btn btn-default">下一个</button> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $('#myCarousel').carousel({ interval : 2000, // pause : 'hover', // wrap : false, }); $('#cycle').on('click', function () { $('#myCarousel').carousel('cycle'); }); $('#pause').on('click', function () { $('#myCarousel').carousel('pause'); }); $('#number').on('click', function () { $('#myCarousel').carousel(2); }); $('#prev').on('click', function () { $('#myCarousel').carousel('prev'); }); $('#next').on('click', function () { $('#myCarousel').carousel('next'); }); // $('#myCarousel').on('slide.bs.carousel', function () { // alert('执行之前调用'); // }); // $('#myCarousel').on('slid.bs.carousel', function () { // alert('执行完毕后调用'); // }); </script> </body> </html>
效果图:
相关推荐
基于bootstrap的轮播插件 carousel
第一种效果:Bootstrap简单轮播 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link href="/bootstrap/3.0.3/css/bootstrap.min....
这是一款基于Bootstrap的响应式Carousel轮播图插件。该轮播图插件在原生Bootstrap Carousel的基础上进行扩展,使轮播图可以更好的布局,以及适应屏幕的尺寸。
jquery-bootstrap管理系统全屏背景轮播代码,直接应用到自己的web项目中,参考效果图可用看百度网盘的login界面。
图片预览轮播展示,使用的是Bootstrap 轮播(Carousel)插件,提供了自适应的特性,适用于多图片预览。
手机bootstrap+html5轮播界面,包含上下导航,透明背景效果。
Bootstrap每天必须之轮播(Carousel)插件,Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式,感兴趣的小伙伴们可以参考一下
使用bootstrap制作轮播图。效果:http://blog.csdn.net/yy228313/article/details/50744843
基于bootstrap的图片轮播效果,简单易复用
.Net Mvc 轮播图片 | 使用Bootstrap原生代码的轮播图片 自定义底部按钮,自定义高度的轮播图。 文章链接:...
bootstrap页面同时有两个(以上)轮播图冲突问题详解
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 使用bootstrap的轮播插件可以向站点添加滑块,内容...
基于Bootstrap支持移动端的响应式轮播图效果
jQuery Bootstrap响应式新闻列表文字上下滚动特效
插件描述:基于bootstrap的进度插件。参见实例:http://www.jq22.com/jquery-info4654
bootstrap轮播实例
基于bootstrap的jQuery多级列表树插件,bootstraptreeview、bootstraptree树形菜单
这是个根据bootstrap翻页css样式开发的插件,是写公司业务时自己弄的,样式几乎用的bootstrap原版,配置还算灵活,源代码量少,更改方便,使用时请阅读readme