Bootstrapbootstrap的轮播效果

bootstrap的轮播叫 Carousel
,至于怎么用class去落实,用data-interval等等自定义css属性去控制,如何用JavaScript封闭装好的类去初始化限定轮播速度等,

每当菜鸟教程里面特别详尽,不开讨论,仅仅是对其属效果做个记

Bootstrap 1

每当此每次点击不同之,如口语、写作左边的讲述图片会变,如果用起的轮播自然是碰头左右滑,但是想改变化渐变形式呢?

下 Bootstrap 的轮播(Carousel)插件制作幻灯片,html 代码如下:

<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>
   </ol>   
   <!-- 轮播(Carousel)项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="http://www.wpmomo.com/wp-content/uploads/2015/04/slider13.png" alt="First slide">
      </div>
      <div class="item">
         <img src="http://www.wpmomo.com/wp-content/uploads/2015/04/slider2.png" alt="Second slide">
      </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>

这么做出之幻灯片,默认的图片切换是左右滑动式的,如何改其的切换效果啊?将上述代码的:

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

改一下,加入一个 carousel-fade 类:

<div id="myCarousel" class="carousel-fade carousel slide">

下一场上加 carousel-fade 的 css 样式:

.carousel-fade .carousel-inner .item{  
    opacity:0;  
    -webkit-transition-property:opacity ;  
    -moz-transition-property:opacity ;  
    -ms-transition-property:opacity ;  
    -o-transition-property:opacity ;  
    transition-property:opacity ;
}
.carousel-fade .carousel-inner .active{  
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{  
    left: 0;  
    opacity: 0;
}
.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

这样,幻灯片的切换效果变成淡入淡出式。

那么问题来了 这个 carousel-fade 还来另可以失效的功用也?

或者怎么样改成为内外轮播 ?!

感博主:

http://www.wpmomo.com/bootstrap-carousel.html

 

相关文章