<!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实现图片轮播效果
内容版权声明：除非注明，否则皆为本站原创文章。