bootstrap图片自动轮播效果图：
代码实现：
<!DOCTYPE html> <html lang="zh-CN"> <head> <link href="https://www.jb51.net/bootstrap.min.css" /> <link href="https://www.jb51.net/bootstrap-theme.min.css" /> <script src="https://www.jb51.net/jquery.min.js"></script> <script src="https://www.jb51.net/bootstrap.min.js"></script> <style> #div1 {width:600px; height:500px} </style> </head> <body> <div> <div data-ride="carousel"> <!-- Indicators --> <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> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="https://www.jb51.net/airplane1.jpg" > </div> <div> <img src="https://www.jb51.net/airplane2.jpg" > </div> <div> <img src="https://www.jb51.net/airplane3.jpg" > </div> </div> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> <span>Next</span> </a> </div> </div> </body> <html>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：