Bootstrap 插件轮播

zoukankan html css js c++ java

Bootstrap 插件轮播
Bootstrap 插件-轮播

2018年01月22日 00:25:32 litengbin 阅读数 888

1 : 基本轮播
2 : 带标题的轮播
3 : 设置轮播速度
4 : 控制前后的轮播
- 基本轮播
  
  <!DOCTYPE html>
  
  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
  <style>
  
  div.item img{
  
  100%;
  
  }
  
  div#carousel-example-generic{
  
  80%;
  
  margin:0 auto;
  
  }
  
  </style>
  
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  
  
  
  <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>
  
  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  
  </ol>
  
  
  
  <div class="carousel-inner" role="listbox">
  
  <div class="item active">
  
  <img src="3491.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3492.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3493.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3494.png" >
  
  </div>
  
  </div>
  
  </div>
- 带标题的轮播
  
  <!DOCTYPE html>
  
  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
  <style>
  
  div.item img{
  
  100%;
  
  }
  
  div#carousel-example-generic{
  
  80%;
  
  margin:0 auto;
  
  }
  
  </style>
  
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  
  
  
  <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>
  
  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  
  </ol>
  
  
  
  <div class="carousel-inner" role="listbox">
  
  <div class="item active">
  
  <img src="3491.png" >
  
  <div class="carousel-caption">
  
  LOL1
  
  </div>
  
  </div>
  
  <div class="item">
  
  <img src="3492.png" >
  
  <div class="carousel-caption">
  
  LOL2
  
  </div>
  
  </div>
  
  <div class="item">
  
  <img src="3493.png" >
  
  <div class="carousel-caption">
  
  LOL3
  
  </div>
  
  </div>
  
  <div class="item">
  
  <img src="3494.png" >
  
  <div class="carousel-caption">
  
  LOL4
  
  </div>
  
  </div>
  
  </div>
  
  </div>
- 设置轮播速度
  
  <!DOCTYPE html>
  
  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
  <style>
  
  div.item img{
  
  100%;
  
  }
  
  div#carousel-example-generic{
  
  80%;
  
  margin:0 auto;
  
  }
  
  </style>
  
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  
  
  
  <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>
  
  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  
  </ol>
  
  
  
  <div class="carousel-inner" role="listbox">
  
  <div class="item active">
  
  <img src="3491.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3492.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3493.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3494.png" >
  
  </div>
  
  </div>
  
  </div>
- 控制前后的轮播
  
  <!DOCTYPE html>
  
  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
  <style>
  
  div.item img{
  
  100%;
  
  }
  
  div#carousel-example-generic{
  
  80%;
  
  margin:0 auto;
  
  }
  
  </style>
  
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  
  
  
  <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>
  
  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  
  </ol>
  
  
  
  <div class="carousel-inner" role="listbox">
  
  <div class="item active">
  
  <img src="3491.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3492.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3493.png" >
  
  </div>
  
  <div class="item">
  
  <img src="3494.png" >
  
  </div>
  
  </div>
  
  
  
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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>
  
  </a>
  
  </div>
查看全文

相关阅读:
ORA-39126 KUPW$WORKER.PUT_DDLS [TABLE_STATISTICS]中Worker发生意外致命错误
 C# 9 新特性 —— 增强的 foreach
在 xunit 测试项目中使用依赖注入
 gitee.com 码农中添加私有仓库并通过ssh链接
 强化学习 —— reinforce算法中更新一次策略网络时episodes个数的设置对算法性能的影响 —— reinforce算法中迭代训练一次神经网络时batch_size大小的不同设置对算法性能的影响
 如何在 Ubuntu18.04 server 服务器版本的操作系统下配置IP
东北某海滨城市的某高校的某分校区的校园网登录程序，（python3, 模拟浏览器的登入方式）
强化学习中经典算法 —— reinforce算法 —— （进一步理解，理论推导出的计算模型和实际应用中的计算模型的区别）
【转载】 Linux 设置CPU Performance模式
 深度学习中使用TensorFlow或Pytorch框架时到底是应该使用CPU还是GPU来进行运算？？？

原文地址：https://www.cnblogs.com/grj001/p/12224448.html

Bootstrap 插件轮播

Bootstrap 插件-轮播