基于cssSlidy.js插件实现响应式手机图片轮播效果


Posted in Javascript onAugust 30, 2016

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' 
});

参数详解

基于cssSlidy.js插件实现响应式手机图片轮播效果

如果大家感兴趣的可以点击下载,下载源码哦!

以上所述是小编给大家介绍的cssSlidy.js插件实现响应式手机图片轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
原生js实现日期选择插件
May 21 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
JavaScript探测CSS动画是否已经完成的方法
Aug 30 #Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 #Javascript
很棒的js Tab选项卡切换效果
Aug 30 #Javascript
js改变透明度实现轮播图的算法
Aug 24 #Javascript
标准的js无缝滚动效果
Aug 30 #Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 #Javascript
js制作网站首页图片轮播特效代码
Aug 30 #Javascript
You might like
多文件上载系统完整版
2006/10/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python制作数据导入导出工具
2015/07/31 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
eBay德国站:eBay.de
2017/09/14 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
幼儿园的门卫岗位职责
2014/04/10 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
pandas数值排序的实现实例
2021/07/25 Python