<!--BT轮播图-->
    <div data-ride="carousel" class="carousel slide carousel_inner_padding carousel-fade" id="carousel-container">

注意:carousel-fade是自定义是类。

/*封装bt轮播图淡入淡出效果样式*/
.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;
}

封装bt轮播图淡入淡出效果样式的更多相关文章

  1. 首页大屏广告效果 jquery轮播图淡入淡出

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 原生js实现简单轮播的淡入淡出效果

    实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s; ...

  3. 背景大图隔几秒切换(非轮播,淡入淡出)--变形金刚joy007 项目总结

    工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...

  4. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  5. 基于skitter的轮播图炫酷效果,幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  6. 【Demo】jQuery 轮播图简单动画效果

    功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...

  7. swiper框架,实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  8. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  9. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

  1. 转 图片缓存之内存缓存技术LruCache,软引用

    每当碰到一些大图片的时候,我们如果不对图片进行处理就会报OOM异常,这个问题曾经让我觉得很烦恼,后来终于得到了解决,那么现在就让我和大家一起分享一下吧.这篇博文要讲的图片缓存机制,我接触到的有两钟,一 ...

  2. C#入门经典(第五章-1)

  3. CentOS 6.5搭建Samba服务器

    目标需求:在Windows7下访问CentOS 6.5 root用户桌面/ZS文件夹 0.准备工作 关闭防火墙并开启不起动 service iptables stop chkconfig iptabl ...

  4. sina微博上看到的关于android界面设计相关的规范

    图片来自:http://photo.weibo.com/5174249907/wbphotos/large/mid/3777508610941685/pid/005EaCLFjw1emcpzdgrj9 ...

  5. zencart里常用 SQL

    1.如何替换某个字段的一些字符 如我把products表的products_image字段中包含2011的字符替换成Zencart2012update `products` set `products ...

  6. UML类图基本画法

    转自:http://www.cnblogs.com/import-this/p/5330501.html 1. 类 类包括属性方法 下图的生命就是属性 代谢就是方法 2.基本关系 a.泛化(Gener ...

  7. n个List<Map>合并,Map中某属性值相等的value值相加

    List<Map> maps1 =[{"bigtypes":100,"num":400},{"bigtypes":200,&qu ...

  8. Android USER 版本与ENG 版本的差异--MTK官方解释

     分类: Android(4)  Description]Android USER 版本与ENG 版本的差异 [Keyword]USER ENG user eng 用户版本 工程版本 差异 [Solu ...

  9. Android学习笔记之Service

    与服务通信 用bindservice 而startservice并无通信条件. service 为android为系统服务,所以程序员无法new出来,只能建立服务,共其他组件使用. package c ...

  10. Bootstrap学习指南

    一.Bootstrap简介 二.Bootstrap安装 三.Bootstrap CSS 四.Bootstrap 布局组件 五.Bootstrap 插件 六.Bootstrap定制