修改 Bootstrap 幻灯片的轮播效果切换方式 - 文章教程

修改 Bootstrap 幻灯片的轮播效果切换方式

发布于 2017-10-11 字数 2544 浏览 5062 评论 1

Bootstrap 的轮播(Carousel)插件制作出的幻灯片,默认的图片切换是左右滑动式的,效果虽然好看也能接受,但是项目需求需要使用淡入淡出的方式切换。

修改 Bootstrap 幻灯片的轮播效果切换方式

使用 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;
}

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浮生未歇 2017-10-11 1 楼

感觉切换的不够自然,不是连续淡入淡出的。

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论