脚本宝典收集整理的这篇文章主要介绍了js实例基于BootStrap的图片轮播效果展示实例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
先给大家展示下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"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>图片轮播_01</title> <!-- Bootstrap --> <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"停留时间/幅图 支持键盘左右方向键对图片进行轮播方向选择 --> <p class="container"> <p style="width:960px;height: 400px;margin: auto;padding: auto;"> <p id="carousel-example-generic" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li> </ol> <p class="carousel-inner"> <p class="item active"> <img src="../img/图片轮播/pic01.jpg" /> </p> <p class="item"> <img src="../img/图片轮播/pic02.jpg" /> <!-- 图片上要显示的文字 --> <p class="carousel-caption"> <h3>联想校园大使</h3></p> </p> <p class="item"> <img src="../img/图片轮播/pic03.jpg" /> </p> <p class="item"> <img src="../img/图片轮播/pic04.jpg" /> </p> </p> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </p> </p> </p> <!--设定时间间隔，通过JavaScript，这样做相对于css属性设定而言，可以自启动，无需人为进行干预--> <script> $(".carousel").carousel({ interval: 4000 }) </script> </body> </html>
以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对ASPKU源码库网站的支持！
先给大家展示下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"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>图片轮播_01</title> <!-- Bootstrap --> <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"停留时间/幅图 支持键盘左右方向键对图片进行轮播方向选择 --> <p class="container"> <p style="width:960px;height: 400px;margin: auto;padding: auto;"> <p id="carousel-example-generic" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li> </ol> <p class="carousel-inner"> <p class="item active"> <img src="../img/图片轮播/pic01.jpg" /> </p> <p class="item"> <img src="../img/图片轮播/pic02.jpg" /> <!-- 图片上要显示的文字 --> <p class="carousel-caption"> <h3>联想校园大使</h3></p> </p> <p class="item"> <img src="../img/图片轮播/pic03.jpg" /> </p> <p class="item"> <img src="../img/图片轮播/pic04.jpg" /> </p> </p> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </p> </p> </p> <!--设定时间间隔，通过JavaScript，这样做相对于css属性设定而言，可以自启动，无需人为进行干预--> <script> $(".carousel").carousel({ interval: 4000 }) </script> </body> </html>
以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对ASPKU源码库网站的支持！
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例基于BootStrap的图片轮播效果展示实例代码全部内容，希望文章能够帮你解决js实例基于BootStrap的图片轮播效果展示实例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。