聊一聊 bootstrap 的轮播图插件

举报
经典鸡翅 发表于 2022/02/17 23:24:27 2022/02/17
【摘要】 今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图。功能不需要太炫酷,那么bootstrap的插件是你的首要选择。 使用方式 引入js和css 直接引入bootsrap.js和bootstrap.css两个文件即可。 示例html代码 <d...

今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图。功能不需要太炫酷,那么bootstrap的插件是你的首要选择。

使用方式

引入js和css

直接引入bootsrap.js和bootstrap.css两个文件即可。

示例html代码

<div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <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> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  

上面的示例代码从菜鸟教程直接copy过来的。根据需要酌情删减。

js初始化

$('.carousel').carousel()
carousel里面有一些选项,可以进行设置。

interval:轮播的间隔时间,默认值5000

pause:何时暂停,默认值hover,鼠标悬浮上去,则暂停。值改为null,意味着无论怎样都不暂停。

wrap:轮播是否连环,默认为true。

keyboard:是否相应键盘操作,默认为true。

一些方法事件


   
  1. //轮播事件为200
  2. $('#identifier').carousel({
  3. interval: 2000
  4. })
  5. //从左到右循环轮播
  6. $('#identifier').carousel('cycle')
  7. //停止轮播
  8. $('#identifier').carousel('pause')
  9. //轮播到某一帧
  10. $('#identifier').carousel(0)
  11. $('#identifier').carousel(1)
  12. //轮播到上一个项目
  13. $('#identifier').carousel('prev')
  14. //轮播到下一个项目
  15. $('#identifier').carousel('next')

回调函数


   
  1. //滑动时出发的回调
  2. $('#identifier').on('slide.bs.carousel', function () {
  3. // 执行一些动作...
  4. })
  5. //完成滑动过渡效果后,触发的事件
  6. $('#identifier').on('slid.bs.carousel', function () {
  7. // 执行一些动作...
  8. })

自己使用例子

搞一个点击哪里,跳转哪里的东西


   
  1. var car = $(".carousel");
  2. car.carousel('pause');
  3. $("#firstLi").bind("click", function() {
  4. car.carousel(0);
  5. car.carousel('pause');
  6. });
  7. $("#secondLi").bind("click", function() {
  8. car.carousel(1);
  9. car.carousel('pause');
  10. });

有什么好处

先说一下swiper插件,他确实好用,功能强大,但是不支持ie8。支持ie8的版本swiper2不支持自动调整高度的功能。
owl-carousel支持自动调整高度,支持ie8.但是他在ie8下会有个闪烁的问题,这个官网也存在此问题,是个bug。
最终bootstrap的轮播图最为好使。

文章来源: blog.csdn.net,作者:经典鸡翅,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/hanqing456/article/details/111878865

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。