cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等。

在线实例

实例演示

使用方法

<div id="slidy-container"> 
    <figure id="slidy"> 
        <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-caption="jQuery.nicescroll美化滚动条"></a> 
        <a href='#' target='_blank'><img src="img/4.jpg" alt="jQuery仿淘宝商品多属性查询" data-caption="jQuery仿淘宝商品多属性查询"></a> 
        <a href='#' target='_blank'><img src="img/3.jpg" alt="jQuery结合elevateZoom演示多种放大镜效果" data-caption="jQuery结合elevateZoom演示多种放大镜效果"></a> 
        <a href='#' target='_blank'><img src="img/2.jpg" alt="百度编辑器ueditor" data-caption="百度编辑器ueditor"></a> 
    </figure> 
</div>

  

cssSlidy({ 
    timeOnSlide: 5, 
    timeBetweenSlides: .5, 
    slidyContainerSelector: '#slidy-container', 
    slidySelector: '#slidy', 
    captionSource: 'data-caption', 
    captionBackground: 'rgba(0,0,0,0.5)', 
    captionColor: '#ff0', 
    captionFont: 'Raleway, Brittanic Bold, Hevetica, sans-serif', 
    captionPosition: 'bottom', 
    captionAppear: 'perm', 
    captionSize: '16px', 
    captionPadding: '1em', 
    /*fallbackFunction: function(){ alert("Oh noes! You can't animate!"); },*/ 
    cssAnimationName: 'slidy' 
});

  

 

参数详解

参数 描述 默认值
timeOnSlide 滑动时间 ,单位秒 3
timeBetweenSlides 间隔时间 ,单位秒 1
slidyContainerSelector 滑动目标容器 #slidy-container
slidySelector 滑动目标每个图片外选择器 #slidy
slidyDirection 滑动方向, left, right left
fallbackFunction 滑动回调 function() {}
cssAnimationName css动画名称 slidy
captionSource 标题来源 data-caption
captionBackground 标题背景色 rgba(0,0,0,0.3)
captionColor 标题颜色 #fff
captionFont 标题字体 Avenir, Avenir Next, Droid Sans, DroidSansRegular, Corbel, Tahoma, Geneva, sans-serif
captionPosition 标题位置 bottom
captionAppear 标题动画方式 options: slide, perm, fade slide
captionSize 标题字体大小 1.6rem
captionPadding 标题间隔 0.6rem

cssSlidy.js 响应式手机图片轮播的更多相关文章

  1. swiper.js 响应式多图轮播特效

    swiper.js实现响应式的左右切换图片案例展示布局 1.head引入css文件 <link type="text/css" rel="stylesheet&qu ...

  2. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

  3. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  6. 使用bootstrap建立响应式网页——通栏轮播图(carousel)

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  7. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  8. 关于Layui 响应式移动端轮播图的问题

    用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...

  9. js或jquery实现图片轮播

    如: 1.//3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index =  ...

随机推荐

  1. PHP将富文本编辑后的内容,去除样式图片等只保留txt文本内容

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  2. file:///Users/xmg/Desktop/xiangmu~Bsbdejie/BaisibudejieTheSecondtime/BaisibudejieTheSecond/BaisibudejieTheSecond/AppDelegate.m: warning: Missing file: /Users/xmg/Desktop/xiangmu~Bsbdejie/BaisibudejieT

    warning: Missing file: is missing from working copy fatal error: file '-.h' has been modified since ...

  3. Cwinux源码解析(五)

      Cwinux源码解析(五)

  4. python--爬虫入门(七)urllib库初体验以及中文编码问题的探讨

    python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...

  5. 关于有默认值的字段在用EF做插入操作时的思考

    今天在用EF做插入操作的时候发现数据库中一个datetime类型的字段(CreateDate)的值居然全部为null.于是赶紧看表结构发现CreateDate字段居然是允许为空的. 虽然为空,但是设置 ...

  6. 硬刚Google ,这家小公司的增长团队长啥样

    背景: AdRoll 是一家主打重定向广告(Retargeting)服务的技术公司,基于用户浏览记录等信息,为广告主提供几乎瞬时的广告位购买服务,当前估值15.5亿美元.吊打谷歌, AdRoll 已经 ...

  7. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  8. 手把手教你调试Linux C++ 代码(一步到位包含静态库和动态库调试)

    手把手教你调试Linux C++ 代码 软件调试本身就是一项相对复杂的活动,他不仅要求调试者有着清晰的思路,而且对调试者本身的技能也有很高的要求.Windows下Visual Studio为我们做了很 ...

  9. JS&CSS文件请求合并及压缩处理研究(五)

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  10. GPUimage实时滤镜的实现

    GPUIMAGE中GPUImageStillCamera可以调用系统相机,并实现实时滤镜,但是我没有找到相机全屏的方法,望知道的说一下 GPUImageStillCamera继承自GPUImageVi ...