本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
【基于Bootstrap实现图片轮播效果】相关文章：
★ JavaScript基于setTimeout实现计数的方法