标签归档：jquery图片轮播

51个jQuery插件介绍和应用实例

发表于 2011/05/09 由 前端开发-武方博  3,883 views

  jquery是近段时间里比较流行的一个javascript框架，不断有使用者开发出新的 jQuery插件。下面收集了51个开发者最喜欢使用的jQuery插件。 Sliding Panels －滑动门控制 1) Sliding Panels For jQuery -元素可以展开或关闭，创建出手风琴的滑动效果。 (2) jQuery Collapse -这个jQuery插件同样点击后滑动展开或关闭DIV层。 Menu － 菜单 3) LavaLamp (4) A Navigation Menu- 锚链接的无序列表嵌套, 可以添加2级菜单 (5) SuckerFish Style Tabs – 选项卡 6) jQuery UI Tabs / Tabs 3 – 基于 jQuery 的一个Tab选项卡导航 (7) TabContainer Theme – 当用户在选项卡之间进行切换时，产生JQuery风格的淡出动效果。 Accordion－ 手风琴效果 8 ) jQuery Accordion Demo (9) Simple JQuery Accordion menu SlideShows － 幻灯片 10) jQZoom-让你在......查看更多>>

发表在 jquery, 群组收集资源 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 一条评论

jquery图片横向左右滚动效果（带按钮控制）

发表于 2011/05/07 由 前端开发-武方博  6,440 views

这个效果实例是我在去年买的一本书里面读到的，想必大家也知道那本书，就不提名字了，直接上下源代码 代码里面的注释很清楚，方便大家学习。 演示地址：http://www.wufangbo.com/demo/jquery/11/index.html 下载地址：http://www.wufangbo.com/demo/jquery/11/11.rar html代码   <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 2 条评论

Jquery图片无缝左右滚动插件

发表于 2011/05/01 由 前端开发-武方博  3,192 views

  zhw.scroll-1.0.js /* 功能：Jquery无缝滚动插件zhw.scroll-1.0.js 作者：leo 注意：暂只支持div下ul li的滚动 交流：xandchd_kane@163.com */ jQuery.extend({     Scroll: function(settings) {         //初始化参数         var config = $.extend({             stepWidth: 100,         // 滚动步长             waitTime: 4000,         // 间歇时间           &......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

jQuery图片左右滚动和jquery图片左右连续滚动

发表于 2011/04/27 由 前端开发-武方博  4,089 views

  公司网站要用到jQuery横向滚动图片特效，当时我为了速度，直接找了一段jQuery代码放上去了。缺点有两个：一、主管不满意，他需要的是连续不断的滚动，就是无缝滚动，而不是滚动一张图片，等一下再滚动一张图片；二、代码有个地方浏览器报错，我不知道为什么，但是删了也不行，必须要。 花了好长一段时间，找代码、改代码，终于搞定了上面提到的两个效果：滚动停一下、无缝滚动。感谢群里点拨我的朋友，感谢Google提供信息，感谢网上不知名的朋友提供代码。 jQuery滚动图片（非连续滚动） 演示地址：http://www.wufangbo.com/demo/jquery/06/index.html 下载地址：http://www.wufangbo.com/demo/jquery/06/06.rar 这段代码思路很简单，把ul里的li都浮动左，变成一横排。然后ul往左边animate移动一个图片的宽度，把第一张图片追加到最后。用setInterval实现不断调用这个方法即可。最后加上鼠标移上去停止调用方法，移开继续调用方法就OK了。 代码我就补......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 4 条评论

Jquery 仿手机左右拖动滑屏效果

发表于 2011/04/21 由 前端开发-武方博  2,363 views

  前不久公司有个项目是在触摸屏上做产品展示，大家都觉得Iphone或者Android上的滑屏效果不错，我今天也顺便做了一个DEMO，滑屏效果的，预览图如下 　　 演示地址：http://www.wufangbo.com/demo/jquery/04/index.html 下载地址：http://www.wufangbo.com/demo/jquery/04/04.rar   查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

jQuery旋转木马

发表于 2011/04/20 由 前端开发-武方博  1,476 views

所有复杂的特效，我都习惯用firebug去查看它的DOM结构，来查看DOM结构的变化情况。 我观察到的DOM结构和实际的DOM结构有点差别，这就意味着有些初始化的脚本在运作。最主要的差别在< ul >标签内的头部< li >标签和底部 li >标签，主要有两种类型，clone和empty。 第二条线索可以看出底部的克隆元素和可见区域的元素是一样的。 我尝试画了以下图形，你会发现初始化只展示了3项，但总共有5项，所以头部包括了两个克隆元素和一个空元素，底部有三个克隆元素。 实现原理 创建克隆元素的目的是，当我们在滚动最后几项的时候，让人感觉在循环滚动。 标记 为了实现这样一个效果，我们需要给容器添加overflow：hidden这样的代码 <div class="infiniteCarousel"> <div class="wrapper"> <ul> <li>...</li> <li>...</li> <li>...</li> ......查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , | 一条评论

2011年最佳jQuery插件

发表于 2011/03/07 由 前端开发-武方博  1,736 views

  1、3D浮动效果的图片墙 　　               　　这个插件(http://ajoin.it/mipage/3dGalleyView/1.x/1.1/)实际上是利用jQuery做的一个图片墙的效果，如上图所示，用户可以设置要展示的图片，然后可以自由拖动图片选择，在拖动时会发现有很COOL的图片移动的效果，当移动到想看的图片后，可以点查看，即可放大图片。 　　2、jQuery手风琴图片展示控件 　　               　　该控件实现的是一个象手风琴拉箱似的图片展示效果(http://flcomponents.net/Components/Item/JQuery_Accordion_Gallery)，如上图所示，当鼠标点某张图片时，图片将自右向左滑动展示，并显示该图片的说明文字，而当点选已经看过的图片时，就会象手风琴拉箱一样，图片自左向右滑动显示。 　　3、超级简单的幻灯播放器 　　               　　这个幻灯播放器可以说......查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , , | 留下评论