bootstrap渐变轮播图

最新推荐文章于 2024-01-15 19:39:34 发布

SFwords

最新推荐文章于 2024-01-15 19:39:34 发布

阅读量2.1k

点赞数

分类专栏：学习

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html> 
 
 
  <html> 
 

 
  <head> 
 
 
  <meta 
  charset= 
  "utf-8" 
  > 
 
 
  <title>Bootstrap 实例 - 自定义缩略图 
  </title> 
 
 
  <link 
  rel= 
  "stylesheet" 
  href= 
  "http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" 
  > 
 
 
  <script 
  src= 
  "http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js" 
  > 
  < 
  /script> 
 
 
  <script 
  src= 
  "http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js" 
  > 
  < 
  /script> 
 
 
  <style> 
 
 
  . 
  carousel-fade  
  . 
  carousel-inner  
  . 
  item { 
 
 
  opacity: 
  0; 
 

   -webkit-transition-property: 
  opacity; 
 

   -moz-transition-property: 
  opacity; 
 

   -ms-transition-property: 
  opacity; 
 

   -o-transition-property: 
  opacity; 
 
 
  transition-property: 
  opacity; 
 

   } 
 

 
  . 
  carousel-fade  
  . 
  carousel-inner  
  . 
  active { 
 
 
  opacity: 
  1; 
 

   } 
 

 
  . 
  carousel-fade  
  . 
  carousel-inner  
  . 
  active 
  . 
  left 
  , 
 
 
    
  . 
  carousel-fade  
  . 
  carousel-inner  
  . 
  active 
  . 
  right { 
 
 
  left: 
  0; 
 
 
  opacity: 
  0; 
 

   } 
 

 
  . 
  carousel-fade  
  . 
  carousel-inner  
  . 
  next 
  . 
  left 
  , 
 
 
    
  . 
  carousel-fade  
  . 
  carousel-inner  
  . 
  prev 
  . 
  right { 
 
 
  opacity: 
  1; 
 

   } 
 
 
  < 
  /style> 
 
 
  </head> 
 

 
  <body> 
 
 
  <div 
  class= 
  " col-lg-4" 
  > 
 
 
  <div 
  id= 
  "carousel" 
  class= 
  "carousel slide carousel-fade" 
  data-ride= 
  "carousel" 
  data-interval= 
  "5000" 
  > 
 
 
  <!-- 轮播（Carousel）指标 --> 
 
 
  <ol 
  class= 
  "carousel-indicators" 
  > 
 
 
  <li 
  data-target= 
  "#carousel" 
  data-slide-to= 
  "0" 
  class= 
  "active" 
  ></li> 
 
 
  <li 
  data-target= 
  "#carousel" 
  data-slide-to= 
  "1" 
  ></li> 
 
 
  <li 
  data-target= 
  "#carousel" 
  data-slide-to= 
  "2" 
  ></li> 
 
 
  <li 
  data-target= 
  "#carousel" 
  data-slide-to= 
  "3" 
  ></li> 
 
 
  </ol> 
 
 
  <!-- 轮播（Carousel）项目 --> 
 
 
  <div 
  class= 
  "carousel-inner" 
  > 
 
 
  <div 
  class= 
  "item active" 
  > 
 
 
  <img 
  src= 
  "./ll/img/0.jpg" 
  width= 
  "100%" 
  > 
 
 
  </div> 
 
 
  <div 
  class= 
  "item" 
  > 
 
 
  <img 
  src= 
  "./ll/img/1.jpg" 
  width= 
  "100%" 
  > 
 
 
  </div> 
 
 
  <div 
  class= 
  "item" 
  > 
 
 
  <img 
  src= 
  "./ll/img/2.jpg" 
  width= 
  "100%" 
  > 
 
 
  </div> 
 
 
  <div 
  class= 
  "item" 
  > 
 
 
  <img 
  src= 
  "./ll/img/3.jpg" 
  width= 
  "100%" 
  > 
 
 
  </div> 
 
 
  </div> 
 
 
  <a 
  class= 
  "left carousel-control" 
  href= 
  "#carousel" 
  role= 
  "button" 
  data-slide= 
  "prev" 
  > 
 
 
  <span 
  class= 
  "glyphicon glyphicon-chevron-left" 
  aria-hidden= 
  "true" 
  ></span> 
 
 
  <span 
  class= 
  "sr-only" 
  >Previous 
  </span> 
 
 
  </a> 
 
 
  <a 
  class= 
  "right carousel-control" 
  href= 
  "#carousel" 
  role= 
  "button" 
  data-slide= 
  "next" 
  > 
 
 
  <span 
  class= 
  "glyphicon glyphicon-chevron-right" 
  aria-hidden= 
  "true" 
  ></span> 
 
 
  <span 
  class= 
  "sr-only" 
  >Next 
  </span> 
 
 
  </a> 
 
 
  </div> 
 
 
  <!-- 轮播（Carousel）导航 --> 
 
 
  </div> 
 

 
  </body> 
 
 
  <script> 
 
 
  $ 
  ( 
  function 
  () 
  { 
 
 
  $ 
  ( 
  '.carousel' 
  ). 
  carousel 
  ({ 
 
 
  interval: 
  3000 
 
 
  }) 
 
 
  }); 
 
 
  < 
  /script> 
 

 
  </html> 
 