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 = ...
随机推荐
- 查看 table,view,sp的定义
1, 查看用户创建的Proc,View, UDF,trigger 的定义 sys.sql_modules Returns a row for each object that is an SQL la ...
- CSS3新技能学习笔记
说来惭愧自认为对css了解,但在项目中却很少有正确的使用css,如果面向对象的css吧,其实也不是不想用而是css天生就是面向对象的,高度可重用,但是如果把每个都单独提取,难免会有过多的class以及 ...
- Topology and Geometry in OpenCascade-Face
Topology and Geometry in OpenCascade-Face eryar@163.com 摘要Abstract:本文简要介绍了几何造型中的边界表示法(BRep),并结合程序说明O ...
- gridview里日期显示格式
Text='<%#Bind("EndDate","{0:yyyy-MM-dd}") %>'
- pojBuy Tickets2828线段树或者树状数组(队列中倒序插队)
这题开始的思路就是模拟:就像数组中插点一样,每一个想买票的人都想往前插队! 但是这样的话肯定TLE, 看了别人的思路之后才恍然大悟! 正解: 将开始的正序插入,变成倒序插入,这样的话,想一想:第 i ...
- Hadoop阅读笔记(六)——洞悉Hadoop序列化机制Writable
酒,是个好东西,前提要适量.今天参加了公司的年会,主题就是吃.喝.吹,除了那些天生话唠外,大部分人需要加点酒来作催化剂,让一个平时沉默寡言的码农也能成为一个喷子!在大家推杯换盏之际,难免一些画面浮现脑 ...
- 可视化工具solo show
辗转一圈还是回到了我魂牵梦绕的可视化上来了. 在Gephi+Netbeans上折腾了将近一个星期后,我深深的体会到个人对于代码的驾驭能力尚有提升的空间^_^,路很长,方向很重要,三思而行. 转载请标明 ...
- Android 2.x中使用actionbar - Actionbarsherlock
1. 范例说明 从Android 3.0开始,Android引入了ActoinBar,不得不说3.0之前android的标题栏确实比较丑,并且还没有任何功能. 之前很多应用的顶部栏很多都是仿苹果的,比 ...
- JS网页顶部弹出可关闭广告图层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Azure ARM (10) ARM模式下的虚拟机和Classic Model虚拟机的区别
<Windows Azure Platform 系列文章目录> 本文内容比较多,请大家仔细阅读,谢谢! 请读者注意,在Azure ARM平台,有两种虚拟机模式:经典虚拟机和ARM虚拟机 A ...