Bootstrap轮播图的使用和理解4

2019-11-19 18:30:59

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jQuery学习笔记之入门

下一篇：12 款 JS 代码测试必备工具(翻译)