<!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"> <title>Bootstrap 模板</title> <link href="https://www.jb51.net/lib/bootstrap/css/bootstrap.css"> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> img { width: 100%; height: 100%; } p { text-align: center; } </style> </head> <body> <!-- 轮播图部分 --> <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/images/轮播1.png" alt="轮播图1"> <div> 轮播图1 </div> </div> <div> <img src="https://www.jb51.net/images/轮播2.png" alt="轮播图2"> <div> 轮播图2 </div> </div> <div> <img src="https://www.jb51.net/images/轮播3.png" alt="轮播图3"> <div> 轮播图3 </div> </div> <p>轮播图尝试</p> </div> <!-- Controls --> <!-- 控制 --> <!-- 向左滑动 --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="false"></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> <!-- js控制轮播图 --> <button>向前</button> <button>向后</button> <button>停止</button> <button>开始</button> <button>到第二张</button> <script src="https://www.jb51.net/lib/jquery/jquery.js"></script> <script src="https://www.jb51.net/lib/bootstrap/js/bootstrap.js"></script> <!-- 轮播图还支持js控制 --> <script> $(function(){ $('.carousel').carousel({ interval: 2000,//轮播间隔 pause:"hover", //鼠标悬停在轮播图上，是否停止滚动 wrap:true, // keyboard:true //响应键盘事件 }); $("#prev").click(function(event) { $('.carousel').carousel('prev')// 周期上一个项目。 }); $("#next").click(function(event) { $('.carousel').carousel('next')// 周期到下一个项目。 });; $("#pause").click(function(event) { $('.carousel').carousel('pause')// 从通过项目循环停止传送带。 });; $("#start").click(function(event) { $('.carousel').carousel('cycle')// 通过传送带项目周期从左到右。 });; $("#jump").click(function(event) { $('.carousel').carousel(1)// 循环传送带到一个特定的帧（0为主，类似于数组）。 });; }); </script> </body> </html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：