Devrama Slider 是个图像滑块,带有许多非常有趣的特性。

它不仅支持图像还支持 HTML 内容。 响应式 方便 CSS3 转换 转换效果 进度条 高级的预加载和延迟加载 CSS 自定义 用户可以定义导航或者控制器

在线实例

实例演示

使用方法

  1. <div class="slide1" data-lazy-background="4247776023_81a3f048ca_b.png">
  2. <h3 data-pos="['10%', '110%', '10%', '5%']" data-duration="700" data-effect="move">
  3. Responsive
  4. </h3>
  5. <div class="description" data-pos="['60%', '110%', '60%', '60%']" data-duration="300" data-effect="move">
  6. Automatically,
  7. </div>
  8. <div class="description" data-pos="['70%', '110%', '70%', '65%']" data-duration="300" data-effect="move">
  9. it resizes
  10. </div>
  11. <div class="description" data-pos="['80%', '110%', '80%', '70%']" data-duration="300" data-effect="move">
  12. with window size!!
  13. </div>
  14. </div>
复制
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('.front-demo').DrSlider({
  4. navigationType: 'circle',
  5. width: 1024,
  6. height: 400,
  7. transition: 'slide-left',
  8. duration: 5000
  9. });
  10. });
  11. </script>
复制

jQuery Devrama Slider 幻灯片的更多相关文章

  1. Devrama Slider - 支持任意 HTML 的内容滑块

    Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持.主要特色:响应式.图片预加载.图片延迟加载.进度条.自定义导航栏和控制按钮等等. 在线演 ...

  2. jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  3. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  4. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  5. jQuery Mobile Slider 禁用点击事件

    阿子原创,转载请注明出处. 在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作.为此需要禁用Slider的点击事件. 官方A ...

  6. JQuery之滑动幻灯片插件Easy Slider初体验

    Easy Slider 是一个滑动幻灯片插件,支持任何图片或内容,可以实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.基本上只需要引入这个插件后,设置好内容,然后样式化C ...

  7. The Responsive jQuery Content Slider

    jquery slider 效果 http://bxslider.com/ http://www.cnblogs.com/lhb25/archive/2012/08/13/jquery-image-e ...

  8. jQuery siteslider 动画幻灯片

    在线实例 效果一 效果二 使用方法 <div class="container demo-1">             <div id="slider ...

  9. 9种网页Flash焦点图和jQuery焦点图幻灯片

    jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的j ...

随机推荐

  1. AX7 VM can not starting

    这个问题跟很多人遇到的一样,VM下载,一开始使用正常,特然某个时候,就挂了,直接引用老外的描述吧 http://community.dynamics.com/ax/f/33/p/203984/5296 ...

  2. 重构第3天:方法提公(Pull Up Method)

    理解:方法提公,或者说把方法提到基类中. 详解:如果大于一个继承类都要用到同一个方法,那么我们就可以把这个方法提出来放到基类中.这样不仅减少代码量,而且提高了代码的重用性. 看重构前的代码: usin ...

  3. Session丢失的解决办法小结

    最近在做ASP.NET项目时,测试网站老是取不出Session中的值,在网上搜索了一下,找到一些解决方法,记录在这里.最后使用存储在StateServer中的办法解决了问题. SessionState ...

  4. js apply/call/caller/callee/bind使用方法与区别分析

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, ...

  5. 微信公众号开发第六课 BAE结合实现迅雷账号随机分享

    迅雷离线是个好东西,那么我们能不能实现这样一个功能,回复迅雷,随机返回一个迅雷账户和密码. 首先在t_type类型表中添加 迅雷以及对应用值xunlei,这样返回的case值中对应值xunlei. 建 ...

  6. webgame设计之功能模块的代理模式

    原文地址:http://chengduyi.com/blog/?post=27 在游戏设计中,通常会将一些实现了具体功能的模块进行封装,达到重用的目的.这些功能模块包括:1.网络通信模块(实现连接,断 ...

  7. DDD:聊天笔记

    聚合跟和实体 聚合根是实体. 实体有生命周期,使用标识进行跟踪. 聚合根是全局标识,由仓储或其它服务负责其生命周期. 实体是局部标识,由聚合根负责其生命周期. 为什么能应对复杂度? 纵向.横向.时间维 ...

  8. 3、使用Oracle Logminer同步Demo

    使用Oracle Logminer同步Demo 1 Demo介绍 1.1 Demo设想 前面介绍了Oracle LogMiner配置使用以及使用LogMiner进行解析日志文件性能,在这篇文章中将利用 ...

  9. 设计前沿:25款精妙的 iOS 应用程序图标

    在这篇文章中,我为大家精心挑选的25款巧妙设计的 iOS 应用程序图标,会激发你未来的工作.苹果的产品总是让人爱不释手,设计精美,对用户使用体验把握得淋漓尽致,iPhone.iPad.iPod和 iM ...

  10. cocos2dx-3.x 导出自定义类到 lua 过程详解

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.简介 最近正在学习cocos2d中的lua游戏开发,因为lua开发的热更新特性,大家开发游戏好像都会优先选择lua作为 ...