BootStrap：轮播插件

前述

利用 BootStrap 实现图片轮播，包括 基本轮播、带标题的轮播、设置轮播速度的轮播、控制前后的轮播

实例

基本轮播

代码

1.引入bootstrap和jQuery文件

2.首先要有一个整体的轮播容器

3.设置轮播指标

• data-ride 属性：取值 carousel，并且将其定义在 carousel 上。

• data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如下面的实例，取值为“#carousel-example-generic”，并且将其定义在轮播图计数器的每个 li 上。

• data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。

• Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体

4.设置轮播的幻灯片项目

• Carousel-inner：旋转图片列表区域，其中每项有item来修饰
• 其中的active、next、prev都认为是可见的
• class="item active"：利用active来设置对应显示的

1. 完整代码

效果展示

可以看到我是通过鼠标点击来实现图片的切换

带标题的轮播

代码

和基本轮播的整体结构相同， 不同点是要在轮播的幻灯片项目中添加 Carousel-caption 样式对应的代码块

• Carousel-caption：表示每个item项应该有标题信息，默认显示下、中位置

    

        

            
            

                
标题一
                
图片一内容简介
            
        
        

            
            

                
标题二
                
图片二内容简介
            
        
        

            
            

                
标题三
                
图片三内容简介
            
        
    
        

            
            

                
标题四
                
图片四内容简介
            
        
    

效果展示

设置轮播速度的轮播

代码

1.添加轮播时间的属性
设置轮播速度也非常简单，不需要进行大改动，只需要在整体的轮播容器上设置 data-interval="1000" 属性
表示每一秒轮播一张图片

2.完整代码

    
    

        

        

        

        

    
 
    
    

        

            
            

                
标题一
                
图片一内容简介
            
        
        

            
            

                
标题二
                
图片二内容简介
            
        
        

            
            

                
标题三
                
图片三内容简介
            
        
    
        

            
            

                
标题四
                
图片四内容简介
            
        
    

效果展示

控制前后的轮播

代码

1.我们要在基本轮播的基础上添加控制前后切换的代码来实现功能
最核心的代码是：data-slide="prev" 属性 data-slide接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。

2.完整代码

    
    

        

        

        

        

    
 
    
    

        

            
            

                
标题一
                
图片一内容简介
            
        
        

            
            

                
标题二
                
图片二内容简介
            
        
        

            
            

                
标题三
                
图片三内容简介
            
        
    
        

            
            

                
标题四
                
图片四内容简介
            
        
    
    
    
        
    
    
        
    

效果展示

总结

结合上面的实例，可以总结出：

• Html结构：主要分为以四个部分
  • 容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆圈指示符的关联
  • 图片列表部分，用一个外层div包裹所有，然后每个img会被一个div，则class为item的包裹住
  • 圆圈指示符：用一个ol列表来显示其各图形列表项，每个列表项需要指定data-slide-to=”index”属性，用于标记当前圆圈的索引号，ol li 来和最外层的容器进行关联
  • 左右控制按钮：实现向左、向右移动的功能
• css样式
  • Carousel：只有一个相对定位标记
  • Carousel-inner：旋转图片列表区域，其中每项有item来修饰，其中的active、next、prev都认为是可见的，Carousel-caption：表示每个item项应该有标题信息，默认显示下、中位置
  • Carousel-control：设置向左、向右按钮的样式，其中会设置渐变、透明度等信息，提供了icon-prev、icon-next两种额外样式
  • Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体