用bootstrap3来图片滚动播放-->Carousel

QQ截图20141122153230.png

这样的效果记得最先在ios7的官方控件库中出现

之后安卓也在某个版本加入了这个view

设计是通用的啊..bootstrap3也支持在web中使用这样的效果

图为网易云音乐的首页

实现这个很简单

  
  

    

    

    

  

  
  

    

      
      

        ...
      
    
    

      
      

        ...
      
    
    ...
  

  
  
    
    Previous
  
  
    
    Next
  

分为三个部分

指示器

一个部分是下面的小点..就是指示器

QQ截图20141122153539.png

ol class="carousel-indicators"类用于创建这个指示器
每个

里 data-slide-to="0" 属性用于指引位置 class="active" 定义默认激活状态

item

  
  

    
...
    
...
  

没啥悬念 就是每一个项目

填充图片 题目 和内容就好

左右控制器

代码如下

      
        
        Previous
      
      
        
        Next
      

在javascript中操作

初始化

$('.carousel').carousel({
  interval: 2000
})

进行循环
.carousel('cycle')
`

暂停
.carousel('pause')

定位到具体某一个item 从0开始

.carousel(number)

前一个

.carousel('prev')

下一个
.carousel('next')