先给大家展示下bootstrap图片轮播图，效果如下所示，如果大家感觉效果还不错，请继续往下阅读，参考实现代码。
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <> <title>图片轮播_01</title> <> <link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="../js/jquery-2.1.4.min.js"></script> <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> </head> <body> <!-- 作者：凯尔 时间：2016-02-20 描述： carousel date-interval="4000"停留时间/幅图 支持键盘左右方向键对图片进行轮播方向选择 --> <div> <div> <div id="carousel-example-generic"> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <div> <div> <img src="../img/图片轮播/pic01.jpg" /> </div> <div> <img src="../img/图片轮播/pic02.jpg" /> <!-- 图片上要显示的文字 --> <div> <h3>联想校园大使</h3></div> </div> <div> <img src="../img/图片轮播/pic03.jpg" /> </div> <div> <img src="../img/图片轮播/pic04.jpg" /> </div> </div> <> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a> </div> </div> </div> <> <script> $(".carousel").carousel({ interval: 4000 }) </script> </body> </html>
以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！