Bootstrap轮播图的使用和理解4
程序员文章站
2023-11-15 13:01:10
本文实例为大家分享了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"> <title>bootstrap 模板</title> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <!--[if lt ie 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//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 id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- indicators --> <!-- 指示器 --> <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"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- wrapper for slides --> <!-- 包裹幻灯片 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/轮播1.png" alt="轮播图1"> <div class="carousel-caption"> 轮播图1 </div> </div> <div class="item"> <img src="images/轮播2.png" alt="轮播图2"> <div class="carousel-caption"> 轮播图2 </div> </div> <div class="item"> <img src="images/轮播3.png" alt="轮播图3"> <div class="carousel-caption"> 轮播图3 </div> </div> <p>轮播图尝试</p> </div> <!-- controls --> <!-- 控制 --> <!-- 向左滑动 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></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> </div> <!-- js控制轮播图 --> <button id="prev">向前</button> <button id="next">向后</button> <button id="pause">停止</button> <button id="start">开始</button> <button id="jump">到第二张</button> <script src="lib/jquery/jquery.js"></script> <script src="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个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 解析php防止form重复提交的方法