bootstrap源码学习与示例：bootstrap-carousel

bootstrap的旋转木马组件，不过只能自动从左到右，而且与其他组件不一样，需要自己手动初始化一下。

结构还是算简单，

< div  id = "myCarousel"  class = "carousel slide" >
    < div  class = "carousel-inner" >
        < div  class = "item active left" >
            < img  src = "http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg"  alt = "" >
            < div  class = "carousel-caption" >
                < h4 >即使杀光所有报晓的公鸡，天，还是会亮的</ h4 >
                < p >
    @shifeike: 昨天是李尚平被枪杀10周年，我发的那条纪念微博，成为我的新浪微博账号最后一条微博。这个2010年1月为反对红中抢笔而注册的微博，两年多时间里发了14538条微博，加上被删除的差不多近200万字，积累了96269条粉丝，自此灰飞烟灭。
                </ p >
            </ div >
        </ div >
        < div  class = "item next left" >
            < img  src = "http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg"  alt = "" >
            < div  class = "carousel-caption" >
                < h4 >如果人民不欢迎我们，就该我们下台了</ h4 >
                < p >
    【胡耀邦语录】①历史是混不过去的。②民主、自由、平等、博爱等观念是人类精神的一大解放。③如果人民不欢迎我们，就该我们下台了。④不懂的不要装懂，不通的不要装通，不服的不要装服。⑤中国的出路是民主和科学。⑥一个精神上、组织上被禁锢被压制的不自由民族怎么可能与其他国家进行自由竞争呢？
                </ p >
            </ div >
        </ div >
        < div  class = "item" >
            < img  src = "http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg"  alt = "" >
            < div  class = "carousel-caption" >
                < h4 >国家像需要空气一样需要变革</ h4 >
                < p >
    据戈尔巴乔夫基金会新闻处通报，俄总统梅德韦杰夫今天向前苏联总统戈尔巴乔夫颁发圣徒安德烈·佩尔沃兹万内勋章。戈尔巴乔夫在受勋时表示感谢，并称很激动。他坦言，对自己做过的事情问心无愧。他强调，他进行改革不是为了赢得敬重和荣誉，而是因为认识到，“国家像需要空气一样需要变革”。他承认犯过错误，并至今还在为这些错误而烦恼。但他认为：“短短几年所走过的路，使专制的过去永远成为了历史。”
                </ p >
            </ div >
        </ div >
    </ div >
    < a  class = "left carousel-control"  href = "#myCarousel"  data-slide = "prev" >‹</ a >
    < a  class = "right carousel-control"  href = "#myCarousel"  data-slide = "next" >›</ a >
</ div >

这次它的事件是绑在容器上。分别叫做slide与slid。

运行代码

它对应的LESS为carousel.less

 

 

标签:  javascript