jQuery幻灯片效果或者Slideshow效果当中如果不考虑touch效果的话,jQuery Cycle插件实在是太强大了,各种高大上的动画效果,如果想加上touch效果可以结合本blog介绍的wipetouch插件一起使用,用起来也非常简单

使用起来非常简单

                <div id="zoom">
<img src="/images/s1.jpg"/>
<img src="/images/s2.jpg"/>
<img src="/images/s3.jpg"/>
<img src="/images/s4.jpg"/>
</div>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#zoom").cycle({
fx: 'wipe',//切换动作特效选择,还可以选择特效 blindX blindY blindZ cover curtainX curtainY fade fadeZoom growX growY scrollUp scrollDown scrollLeft scrollRight scrollHorz scrollVert shuffle slideX slideY toss turnUp turnDown turnLeft turnRight uncover wipe zoom等等
speed: 1000,//切换速度
timeout: 6000,//切换完之后的停留时间
clip: 'zoom'//'clip' option: 'l2r': left-to-right , 'r2l': right-to-left , 't2b': top-to-bottom ,'b2t': bottom-to-top ,'zoom': center-to-edges });
});
</script>

懂英文的可以到官网上了解更多 http://malsup.com/jquery/cycle/
移动互联网时代,还有功能更加强大的cycle2也出来了,了解更多 http://malsup.com/jquery/cycle2/

jQuery Cycle Plugin的使用的更多相关文章

  1. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  2. 30个非常流行的提示信息插件(jQuery Tooltip Plugin)

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  3. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  4. jQuery DataTables Plugin Meets C#

    Over the weekend, I was doing some work on the internal CMS we use over at eagleenvision.net and I w ...

  5. jQuery Validation Plugin学习

    http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...

  6. jquery.cycle.js简单用法实例

    样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...

  7. (转)jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  8. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

  9. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

随机推荐

  1. CityEngine基于规则贴图的实现技巧

    转自:http://blog.sina.com.cn/s/blog_841eeb5201010p3e.html CityEngine在贴图的实现过程有两种方式:第一种是通过i(geometryPath ...

  2. 3dmax导出3ds具有过多要导出的面超过64k解决方法

    参考:http://blog.sina.com.cn/s/blog_7a71dd090100w3r0.html 修改器->网格编辑->ProOptimizer 选中对象, 原始模型 顶点数 ...

  3. iOS小技巧总结,绝对有你想要的

    原文链接 在这里总结一些iOS开发中的小技巧,能大大方便我们的开发,持续更新. UITableView的Group样式下顶部空白处理 //分组列表头部空白处理 UIView *view = [[UIV ...

  4. DB2 嵌入式应用中定义游标(开放平台上)

    DECLARE CURSOR statement The DECLARE CURSOR statement defines a cursor. Invocation Although an inter ...

  5. NYOJ题目816它合法吗?

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAAJ0CAIAAACwTVMOAAAgAElEQVR4nO3du1LjzNo24O8kyDkQYh

  6. Quartus ii 12.1软件破解之后编译原有的工程出现报警错误的解决办法

    在Quartus ii 12.1软件破解之后,想用来编译原来编译过的工程,但是编译到最后出现下面两个错误警告: 原来以为没有破解成功或者安装的时候有文件被杀毒软件吃了,导致安装错误,又重新安装了两次都 ...

  7. PHP面向对象——重写与重载

    重写/覆盖           override 指:子类重写了父类的同名方法 class Human{    public function say($name){           echo $ ...

  8. Avalon学习

    1.认识AvalonAvalon是一个简单易用的迷你的MVVM框架,作者是博客园的司徒正美,去哪儿.搜狐等等都用这个框架.没有任何依赖,兼容性非常好,支持IE6,不到5000行,压缩后不到50KB.官 ...

  9. 简简单单的一个PYTHON多进程实现

    因为在作自动化部署时,希望能将多个服务分不同的批次进行发布, 同一批次的机器同时发布, 如果前面一批次出错误,后面就需要停止整 个流程. 那可以简单的用threading来实现了. thread_li ...

  10. Instagram的持续部署技术

    Instagram最近发表了一篇关于他们的持续部署(CD)管道的文章,持续部署管道可以让他们更快的将代码推送到生产环境,并且轻松地识别糟糕的提交和始终保持发布可用.在一段时间内以迭代的方式放在一起,其 ...