废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>图片轮播_01</title> <!-- Bootstrap --> <link href="https://www.jb51.net/bootstrap-3.3.5-dist/css/bootstrap.min.css"> <script src="https://www.jb51.net/js/jquery-2.1.4.min.js"></script> <script src="https://www.jb51.net/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> </head> <body> <!-- 作者：凯尔 时间：2016-02-20 描述： carousel date-interval="4000"停留时间/幅图 支持键盘左右方向键对图片进行轮播方向选择 --> <div> <div> <div> <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="https://www.jb51.net/img/图片轮播/pic01.jpg" /> </div> <div> <img src="https://www.jb51.net/img/图片轮播/pic02.jpg" /> <!-- 图片上要显示的文字 --> <div> <h3>联想校园大使</h3></div> </div> <div> <img src="https://www.jb51.net/img/图片轮播/pic03.jpg" /> </div> <div> <img src="https://www.jb51.net/img/图片轮播/pic04.jpg" /> </div> </div> <!-- Controls --> <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> <!--设定时间间隔，通过JavaScript，这样做相对于css属性设定而言，可以自启动，无需人为进行干预--> <script> $(".carousel").carousel({ interval: 4000 }) </script> </body> </html>
以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: