分针网——每日分享：BootStrap轮播入门学习

一般模式

1首先要设置一个轮播图片的容器,记得设上id。

  
  

   
   <div id="myCarousel" class="carousel slide">
   
   </div>
  
  

2.设计轮播图片计数器。

也就是轮播下面的这个小点

三个点分别对应123.用data-slide-to参数进行控制。

data-targe参数照抄，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。

  
  

   
   <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>
  
  

3.设计图片轮播区，这个区域用来放置图片。

把图片放置在class="carousel-inner"的div区域中。

然后每个图片放在class="item"的div区域。

  
  

   
   <div class="carousel-inner">
  
  
  
  
        
   
   <div class="item active">
  
  
  
  

   
               ![](1.jpg)
  
  
  
  
        
   
   </div>
  
  
  
  
        
   
   <div class="item">
  
  
  
  

   
               ![](2.jpg)
  
  
  
  
        
   
   </div>
  
  
  
  
        
   
   <div class="item">
  
  
  
  

   
               ![](3.jpg)
  
  
  
  
        
   
   </div>
  
  
  
  
    
   
   </div>
  
  

最终

  
  

   
   <div id="myCarousel" class="carousel slide">
  
  
  
  
    
   
   <!-- 轮播（Carousel）指标 -->
  
  
  
  
    
   
   <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>   
  
  
  
  
    
   
   <!-- 轮播（Carousel）项目 -->
  
  
  
  
    
   
   <div class="carousel-inner">
  
  
  
  
        
   
   <div class="item active">
  
  
  
  

   
               ![](1.jpg)
  
  
  
  
        
   
   </div>
  
  
  
  
        
   
   <div class="item">
  
  
  
  

   
               ![](2.jpg)
  
  
  
  
        
   
   </div>
  
  
  
  
        
   
   <div class="item">
  
  
  
  

   
               ![](3.jpg)
  
  
  
  
        
   
   </div>
  
  
  
  
    
   
   </div>
  
  
  
  

   
   </div>
  
  

设置轮播标题

这个如果需要，也可以设置，如图

  
  

  
  
        
   
   <div class="item">
  
  
  
  

   
               ![](2.jpg)
  
  
  
  
            
   
   <div class="carousel-caption">标题 2
   
   </div>
  
  
  
  
        
   
   </div>
  
  

设置轮播导航

什么是导航？

如下

  
  
    
   
   <a class="carousel-control left" href="#myCarousel" 
  
  
  
  
       
   
   data-slide
   
   ="prev"
   
   >
   
   &lsaquo;
   
   </a>
  
  
  
  
    
   
   <a class="carousel-control right" href="#myCarousel" 
  
  
  
  
       
   
   data-slide
   
   ="next"
   
   >
   
   &rsaquo;
   
   </a>
  
  

设置轮播自动播放

此时需要jquery出售了。interval: 设置自动播放间隔时间

  
  

   
   <script
   
   >
  
  
  
  
    
   
   $
   
   (document
   
   )
   
   .
   
   ready
   
   (
   
   function
   
   (
   
   ) 
   
   {
  
  
  
  
       
   
   $
   
   (
   
   '.carousel'
   
   )
   
   .
   
   carousel
   
   (
   
   {
  
  
  
  

   
              interval
   
   : 
   
   30
  
  
  
  
       
   
   }
   
   )
  
  
  
  
    
   
   }
   
   )
   
   ;
  
  
  
  

   
   <
   
   /script
   
   >
  
  

综上

  
  

   
   <div id
   
   =
   
   "myCarousel" 
   
   class
   
   =
   
   "carousel slide" data
   
   -interval
   
   =
   
   "2"
   
   >
  
  
  
  
    
   
   <
   
   !
   
   -- 轮播（Carousel）指标 
   
   --
   
   >
  
  
  
  
    
   
   <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
   
   >   
  
  
  
  
    
   
   <
   
   !
   
   -- 轮播（Carousel）项目 
   
   --
   
   >
  
  
  
  
    
   
   <div 
   
   class
   
   =
   
   "carousel-inner"
   
   >
  
  
  
  
        
   
   <div 
   
   class
   
   =
   
   "item active"
   
   >
  
  
  
  
            
   
   !
   
   [
   
   ]
   
   (
   
   1
   
   .jpg
   
   )
  
  
  
  
            
   
   <div 
   
   class
   
   =
   
   "carousel-caption"
   
   >标题 
   
   1
   
   <
   
   /div
   
   >
  
  
  
  
        
   
   <
   
   /div
   
   >
  
  
  
  
        
   
   <div 
   
   class
   
   =
   
   "item"
   
   >
  
  
  
  
            
   
   !
   
   [
   
   ]
   
   (
   
   2
   
   .jpg
   
   )
  
  
  
  
            
   
   <div 
   
   class
   
   =
   
   "carousel-caption"
   
   >标题 
   
   2
   
   <
   
   /div
   
   >
  
  
  
  
        
   
   <
   
   /div
   
   >
  
  
  
  
        
   
   <div 
   
   class
   
   =
   
   "item"
   
   >
  
  
  
  
            
   
   !
   
   [
   
   ]
   
   (
   
   3
   
   .jpg
   
   )
  
  
  
  
            
   
   <div 
   
   class
   
   =
   
   "carousel-caption"
   
   >标题 
   
   3
   
   <
   
   /div
   
   >
  
  
  
  
        
   
   <
   
   /div
   
   >
  
  
  
  
    
   
   <
   
   /div
   
   >
  
  
  
  
    
   
   <
   
   !
   
   -- 轮播（Carousel）导航 
   
   --
   
   >
  
  
  
  
    
   
   <a 
   
   class
   
   =
   
   "carousel-control left" href
   
   =
   
   "#myCarousel" 
  
  
  
  

   
          data
   
   -slide
   
   =
   
   "prev"
   
   >
   
   &lsaquo
   
   ;
   
   <
   
   /a
   
   >
  
  
  
  
    
   
   <a 
   
   class
   
   =
   
   "carousel-control right" href
   
   =
   
   "#myCarousel" 
  
  
  
  

   
          data
   
   -slide
   
   =
   
   "next"
   
   >
   
   &rsaquo
   
   ;
   
   <
   
   /a
   
   >
  
  
  
  

   
   <
   
   /div
   
   > 
  
  
  
  

  
  

   
   <script
   
   >
  
  
  
  
    
   
   $
   
   (document
   
   )
   
   .
   
   ready
   
   (
   
   function
   
   (
   
   ) 
   
   {
  
  
  
  
    
   
   $
   
   (
   
   '.carousel'
   
   )
   
   .
   
   carousel
   
   (
   
   {
  
  
  
  

   
        interval
   
   : 
   
   30
  
  
  
  
    
   
   }
   
   )
  
  
  
  
    
   
   }
   
   )
   
   ;
  
  
  
  

   
   <
   
   /script
   
   >
  
  

本文转自：http://www.f-z.cn/id/278