html代码:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>

Less代码:

.carousel-fade {
.carousel-inner {
.item {
transition-property: opacity;
} .item,
.active.left,
.active.right {
opacity: 0;
} .active,
.next.left,
.prev.right {
opacity: 1;
}
.next,
.prev,
.active.left,
.active.right {
left: 0;
transform: translate3d(0, 0, 0);
}
}
.carousel-control {
z-index: 2;
}
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}
.item:nth-child(1) {
background: #74C390;
}
.item:nth-child(2) {
background: #51BCE8;
}
.item:nth-child(3) {
background: #E46653;
}

js调用代码

$('.carousel').carousel();

  

实际是重写了carousel的样式,实现淡入淡出效果

演示地址:http://codepen.io/Rowno/pen/Afykb

实现Bootstrap Carousel Fade Transition 淡入淡出效果的更多相关文章

  1. Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  2. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

  3. Javascript-- jQuery动画篇(淡入淡出效果)

    淡入淡出效果 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn()实现 ...

  4. 新手学习FFmpeg - 调用API编写实现多次淡入淡出效果的滤镜

    前面几篇文章聊了聊FFmpeg的基础知识,我也是接触FFmpeg不久,除了时间处理之外,很多高深(滤镜)操作都没接触到.在学习时间处理的时候,都是通过在ffmpeg目前提供的avfilter基础上面修 ...

  5. (转)winform Form 淡入淡出效果

    原文地址:http://blog.csdn.net/a237428367/article/details/5933565 using System.Runtime.InteropServices; p ...

  6. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  8. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  9. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

随机推荐

  1. poj3167

    这道题是一道kmp的扩展版的好题一串匹配一串很容易想到kmp,但是这里的匹配要求的是两个串的名次相同显然名次是会变的,为了方便,我们可以换一种表达对于两个等长的串的相同位置,名次相等就是在它之前比它小 ...

  2. nginx+tomcat配置https

    nginx代理https后,应用redirect https变成http,很多页面报404.情况类似http://blog.sina.com.cn/s/blog_56d8ea900101hlhv.ht ...

  3. Light OJ 1037 - Agent 47(预处理状态压缩DP)

    题目大意: 有个特工要执行任务,他会遭遇到最多15个目标,特工必须把他们全部杀死.当他杀死一个目标后他可以使用目标的武器来杀死其他人.因此他必须有一个杀人的顺序,使得他开枪的次数最小. 现在给你一个表 ...

  4. 使用VisualStudio进行单元测试之三

    私有方法需不需要测试,本文不做讨论.假设您也认为有时候,私有方法也需要进行测试,那就一起来看看如何进行私有方法的测试. 准备测试代码 测试用的代码还是前面测试时使用过的代码,不同之处就是在类中增加了一 ...

  5. js遍历数组和遍历对象的区别

    <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.l ...

  6. AC自动机——多模式串匹配的算法思想

    标准KMP算法用于单一模式串的匹配,即在母串中寻求一个模式串的匹配,但是现在又存在这样的一个问题,如果同时给出多个模式串,要求找到这一系列模式串在母串存在的匹配个数,我们应该如何处理呢? 基于KMP算 ...

  7. 《算法问题实战策略》——chaper9——动态规划法技巧

    Q1: 数字游戏: 两个人(A.B)用n个整数排成的一排棋盘玩游戏,游戏从A开始,每个人有如下操作: (1)    拿走棋盘最右侧或者最左侧的棋子,被拿走的数字从棋盘中抹掉. (2)    棋盘中还剩 ...

  8. MySQL Server类型之MySQL客户端工具的下载、安装和使用

    本博文的主要内容有 .MySQL Server 5.5系列的下载 .MySQL Server 5.5系列的安装 .MySQL Server 5.5系列的使用 .MySQL Server 5.5系列的卸 ...

  9. maven常用插件配置

    1.maven-jar-plugin插件 <!-- 排除资源文件中的properties文件,不需要打到jar中,后面通过assembly插件打包到conf目录中 --><plugi ...

  10. ecshop获取url_domain

    <?php function url_domain() { $curr = strpos($_SERVER['PHP_SELF'], '/') !== false ? preg_replace( ...