<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title></title> <link href="https://www.jb51.net/css/bootstrap.css" /> <style> #pic{ width:900px; margin:0 auto; } .carousel-caption{ color:#f00; } </style> </head> <body> <!--carousel中文译为轮播，旋转木马 slide给图片添加运动效果； data-interval是间隔时间，不能低于400否则易出问题，单位为ms即毫秒； data-ride="carousel为页面一加载就开始轮播图片 carousel-caption是在图片上放置文字--> <div> <div data-interval="2000" data-ride="carousel"> <!--小圆点--> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <!--轮播的图片--> <div> <div> <img src="https://www.jb51.net/images/1.jpg"/> <div> <h4>标题1</h4> <p>xxxxxxxxxxxxxxxxxxxx</p> </div> </div> <div> <img src="https://www.jb51.net/images/2.jpg"/> <div> <h4>标题2</h4> <p>xxxxxxxxxxxxxxxxxxxx</p> </div> </div> <div> <img src="https://www.jb51.net/images/3.jpg"/> <div> <h4>标题3</h4> <p>xxxxxxxxxxxxxxxxxxxx</p> </div> </div> <div> <img src="https://www.jb51.net/images/4.jpg"/> <div> <h4>标题4</h4> <p>xxxxxxxxxxxxxxxxxxxx</p> </div> </div> </div> <!--左右按钮--> <a href="#pic" data-slide="prev">‹</a> <a href="#pic" data-slide="next">›</a> </div> </div> <script src="https://www.jb51.net/js/jquery-2.1.0.js"></script> <script src="https://www.jb51.net/js/bootstrap.js"></script> </body> </html>
Bootstrap轮播图的效果：
