Bootstrap carousel轮转图的使用实例详解

最新推荐文章于 2024-07-12 10:00:20 发布

liwei1228

最新推荐文章于 2024-07-12 10:00:20 发布

阅读量2.1k

点赞数

本文详细讲解了Bootstrap Carousel组件的使用方法，包括如何创建轮转图，设置控制按钮，添加滑动效果，以及自定义样式。通过实例演示，帮助开发者实现动态展示图片或内容的轮转效果。

摘要由CSDN通过智能技术生成

100

101

 
         <!DOCTYPE html>  
        
         <html>  
        
         <head>  
        
         <meta charset= 
         "utf-8" 
         >  
        
         <!-- <link rel= 
         "stylesheet" 
         href= 
         "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
         >-->  
        
         <link rel= 
         "stylesheet" 
         href= 
         "css/bootstrap.min.css" 
         />  
        
         <style>  
        
         body {  
        
         padding: 10px;  
        
         margin: 10px;  
        
         }  
        
         </style>  
        
         </head>  
        
         <body>  
        
         <div id= 
         "myCarousel" 
         class= 
         "carousel" 
         >  
        
         <!--第一步：设计轮播图片的容器。-->  
        
         <!-- 
          #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感-->  
        
         <ol class= 
         "carousel-indicators" 
         >  
        
         <!--第二步：设计轮播图片计数器。-->  
        
         <li data-target= 
         "#myCarousel" 
         data-slide-to= 
         "0" 
          class= 
         "active" 
         ></li>  
        
         <li data-target= 
         "#myCarousel" 
         data-slide-to= 
         "1" 
         ></li>  
        
         <li data-target= 
         "#myCarousel" 
         data-slide-to= 
         "2" 
         ></li>  
        
         </ol>  
        
         <div class= 
         "carousel-inner" 
         >  
        
         <!--第三步：设计轮播图片播放区,使用 carousel-inner 样式来控制-->  
        
         <div class= 
         "item active" 
         >  
        
         <img src= 
         "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" 
         alt= 
         "" 
         >  
        
         <div class= 
         "carousel-caption" 
         >  
        
         <h4>标题一</h4>  
        
         <p>图片一内容简介</p>  
        
         </div>  
        
         </div>  
        
         <div class= 
         "item" 
         >  
        
         <img src= 
         "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" 
         alt= 
         "" 
         >  
        
         <div class= 
         "carousel-caption" 
         >  
        
         <h4>标题二/h4>  
        
         <p>图片二内容简介</p>  
        
         </div>  
        
         </div>  
        
         <div class= 
         "item" 
         >  
        
         <img src= 
         "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" 
         alt= 
         "" 
         >  
        
         <div class= 
         "carousel-caption" 
         >  
        
         <h4>标题三</h4>  
        
         <p>图片三内容简介</p>  
        
         </div>  
        
         </div>  
        
         </div>  
        
         <!--第四步：设计轮播图片控制器。向前播放left carousel-control和向后播放的控制器-->  
        
         <a class= 
         "left carousel-control" 
         href= 
         "#myCarousel" 
          data-slide= 
         "prev" 
         >‹  
        
         <!--<a class= 
         "left carousel-control" 
         href= 
         "#slidershow" 
          role= 
         "button" 
         data-slide= 
         "prev" 
         >-->  
        
         <span class= 
         "qlyphicon glyphicon-chevron-left" 
         ></span></a>  
        
         <a class= 
         "right carousel-control" 
         href= 
         "#myCarousel" 
          data-slide= 
         "next" 
         >›  
        
         <span class= 
         "qlyphicon glyphicon-chevron-right" 
         ></span></a>  
        
         <!--<a class= 
         "left carousel-control" 
         href= 
         "#carousel-example-generic" 
         data-slide= 
         "prev" 
         >  
        
         <span class= 
         "qlyphicon glyphicon-chevron-left" 
         ></span>  
        
         </a>  
        
         <a class= 
         "left carousel-control" 
         href= 
         "#carousel-example-generic" 
         data-slide= 
         "next" 
         >  
        
         <span class= 
         "qlyphicon glyphicon-chevron-right" 
         ></span>  
        
         </a>-->  
        
         </div>  
        
         <script>  
        
         $( 
         '.carousel' 
         ).carousel()  
        
         </script>  
        
         <script type= 
         "text/javascript" 
         src= 
         "js/jquery.min.js" 
         ></script>  
        
         <script type= 
         "text/javascript" 
         src= 
         "js/bootstrap.min.js" 
         ></script>  
        
         <!--<script src= 
         "http://libs.baidu.com/jquery/1.9.0/jquery.js" 
         ></script>-->  
        
         <!--<script src= 
         "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" 
         ></script>-->  
        
         </body>  
        
         </html>   
        
         /*bootstrap.css文件第5835行～第5863行*/ 
        
         .carousel-indicators {  
        
         position: absolute;  
         /*整个计数区域绝对定位*/ 
        
         bottom: 10px;  
         /*距容器carousel底部10px*/ 
        
         z-index: 15;  
         /*设置其在Z轴的层级*/ 
        
         /*让整个计数区水平居中*/ 
        
         left: 50%;  
        
         width: 60%;  
        
         padding-left: 0;  
        
         margin-left: -30%;  
        
         text-align: center;  
        
         list-style: none;  
        
         }  
        
         .carousel-indicators li {  
        
         display: inline-block;  
        
         width: 10px;  
        
         height: 10px;  
        
         margin: 1px;  
        
         text-indent: -999px;  
        
         cursor: pointer;  
        
         background-color: 
         #000 \9;  
        
         background-color: rgba(0, 0, 0, 0);  
        
         border: 1px solid 
         #fff;  
        
         border-radius: 10px;  
        
         }  
        
         /*设置当前状态样式*/ 
        
         .carousel-indicators .active {  
        
         width: 12px;  
        
         height: 12px;  
        
         margin: 0;  
        
         background-color: 
         #fff;  
        
         }