图片轮播（Carousel），玩转Bootstrap（JS插件篇）教程-慕课网

图片轮播（Carousel）

插件对应的文件：carousel.js

引用地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-carousel.min.js"></script>

样式对应的文件：

☑ LESS版本：源文件carousel.less

☑ Sass版本：源文件_carousel.scss

☑ 编译后的版本：源文件bootstrap.css第5715行～第5905行

图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮回播放，如下图所示：

上面的轮播效果是6张广告图从右向左播放，鼠标悬停在图片时会暂停播放，如果鼠标悬停或单击右下角圆点时，会显示对应的图片。这种图片轮播效果，在Bootstrap框架中是通过Carousel插件来实现，在下面小节中我们将要介绍的是如何使用Carouse插件实现图片轮播效果。

任务

?不会了怎么办

index.html

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body{padding:10px;margin:10px;} </style> </head> <body> <div id="myCarousel" class="carousel slide"> <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="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""> <div class="carousel-caption"> <h4>标题一</h4> <p>图片一内容简介</p> </div> </div> <div class="item"> <img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""> <div class="carousel-caption"> <h4>标题二/h4> <p>图片二内容简介</p> </div> </div> <div class="item"> <img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" alt=""> <div class="carousel-caption"> <h4>标题三</h4> <p>图片三内容简介</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> <script> $('.carousel').carousel() </script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

5-6 图片轮播（Carousel）