bootstrap的轮播效果

bootstrap的轮播叫 Carousel
,至于什么用class去完毕,用data-interval等等自定义css属性去决定,如何用JavaScript封装好的类去初阶化限定轮播速度等,

在菜鸟教程里面尤其详尽,不做研讨,仅仅是对其联网效果做个笔记

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

 

相关文章