cssSlidy.js 响应式手机图片轮播
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 响应式手机图片轮播的更多相关文章
- swiper.js 响应式多图轮播特效
swiper.js实现响应式的左右切换图片案例展示布局 1.head引入css文件 <link type="text/css" rel="stylesheet&qu ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- 使用bootstrap建立响应式网页——通栏轮播图(carousel)
1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
- Unslider – 轻量的响应式 jQuery 内容轮播插件
Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...
- 关于Layui 响应式移动端轮播图的问题
用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...
- js或jquery实现图片轮播
如: 1.//3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){ index = ...
随机推荐
- PHP将富文本编辑后的内容,去除样式图片等只保留txt文本内容
1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...
- 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 ...
- Cwinux源码解析(五)
Cwinux源码解析(五)
- python--爬虫入门(七)urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- 关于有默认值的字段在用EF做插入操作时的思考
今天在用EF做插入操作的时候发现数据库中一个datetime类型的字段(CreateDate)的值居然全部为null.于是赶紧看表结构发现CreateDate字段居然是允许为空的. 虽然为空,但是设置 ...
- 硬刚Google ,这家小公司的增长团队长啥样
背景: AdRoll 是一家主打重定向广告(Retargeting)服务的技术公司,基于用户浏览记录等信息,为广告主提供几乎瞬时的广告位购买服务,当前估值15.5亿美元.吊打谷歌, AdRoll 已经 ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- 手把手教你调试Linux C++ 代码(一步到位包含静态库和动态库调试)
手把手教你调试Linux C++ 代码 软件调试本身就是一项相对复杂的活动,他不仅要求调试者有着清晰的思路,而且对调试者本身的技能也有很高的要求.Windows下Visual Studio为我们做了很 ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- GPUimage实时滤镜的实现
GPUIMAGE中GPUImageStillCamera可以调用系统相机,并实现实时滤镜,但是我没有找到相机全屏的方法,望知道的说一下 GPUImageStillCamera继承自GPUImageVi ...