20个有创意的jQuery图片和内容滑动及弹出插件
openkk 12年前
<p>在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片，并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件，我们可以很简单地直接将这些图片滑动插件嵌入到网页中，很容易就得到了即酷又实用的jQuery图片滑动效果。</p> <h2>1 FlexSlider</h2> <p>(<a href="/misc/goto?guid=4958188549303377295" target="_blank">Demo演示</a> | <a href="/misc/goto?guid=4958202380909239904" target="_blank">Download下载</a>)</p> <p>FlexSlider是一个非常出色的jQuery滑动切换插件，它支持所有主流浏览器，并有淡入淡出效果。适合所有初级和高级网页设计师使用。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/117ed998731d2ace0fdae677d8cf9224.jpg" width="570" height="381" /><br /> jQuery图片滑动切换插件 - Flexslider</p> <h2>2 Bubble Slidershow Effect with jQuery</h2> <p>(<a href="/misc/goto?guid=4958323243282008108" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323244565547759" target="_blank">Download下载</a>)</p> <p>基于jQuery的泡泡图片滑动切换效果。Bubble Slidershow是一个很有意思的jQuery图片滑动切换插件。它通过泡泡效果来进行图片切换，动态效果很特别。非常适合做风景等照片的切换展示。Bubble Slidershow的代码是模块化的，你可以按你的需求随意修改。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/6f2d7525f10c51980968ebe235a0ac5f.jpg" width="570" height="394" /><br /> jQuery图片滑动切换插件 - 泡泡效果</p> <h2>3 Responsive Image Gallery with Thumbnail Carousel</h2> <p>(<a href="/misc/goto?guid=4958202385911999231" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202386647536374" target="_blank">Download下载</a>)</p> <p>这个图片滑动切换插件非常适合用于照片的切换显示，它使用Elastislide的缩略图。用户可以点击缩略图或左右按钮显示对应的图片。另外它支持用户点击键盘的左右方向键切换图片。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/7709477821932232b86cd96c5fad0cad.jpg" width="570" height="310" /><br /> jQuery图片滑动切换插件 - 照片浏览</p> <h2>4 Circular Content Carousel with jQuery</h2> <p>(<a href="/misc/goto?guid=4958323246828210340" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323247629169226" target="_blank">Download下载</a>)</p> <p>这个图片滑动切换插件合适用于步骤讲解，或产品介绍。当用户点击More按钮时当前内容会移动到最左边，然后显示一个文本框用于显示更多信息。并且可以点击左、右按钮切换内容。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/a70c3494466b6ec797f76c0e03d88b45.jpg" width="570" height="300" /><br /> jQuery图片滑动切换插件 - 滑动及弹出层</p> <h2>5 Lateral On-Scroll Sliding with jQuery</h2> <p>(<a href="/misc/goto?guid=4958323248416489133" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323249199352787" target="_blank">Download下载</a>)</p> <p>这个插件其实已经超越了图片滑动切换的功能。它的作用是用户可以点击按钮，然后自动向上或向下滑动定位到网页的某个位置。网页的内容分成左右两栏，插件的滑动很流畅。可以用于时间线的定位。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/5f2fb81d1f6c7e452fd91b7cac058363.jpg" width="570" height="310" /><br /> jQuery图片滑动切换插件 - 时间轴动态滑动</p> <h2>6 jScrollPane实现隐藏滚动条效果</h2> <p>(<a href="/misc/goto?guid=4958323249997659057" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323250786497141" target="_blank">Download下载</a>)</p> <p>这个滑动插件也是广义的滑动效果插件，它的作用是用于隐藏页面的滚动条。只有当用户鼠标移动到内容上方时才会出来滚动条。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/deb0410bfb3b93b9b3bf28af8310e670.jpg" width="570" height="315" /><br /> jQuery图片滑动切换插件 - 隐藏滚动条</p> <h2>7 Timelinr</h2> <p>(<a href="/misc/goto?guid=4958202285927230448" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202285927230448" target="_blank">Download下载</a>)</p> <p>跟第5个插件很类型，它是一个基于时间线的jQuery滑动插件。你可以自定义它的滑动速度，透明度等效果。同时运行横向和纵向两种滑动切换模式。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/359e7e53f52a40bcdba097122f665278.jpg" width="570" height="377" /><br /> jQuery图片滑动切换插件 - 时间轴动态滑动</p> <h2>8 SmartGallery</h2> <p>(<a href="/misc/goto?guid=4958202303614494798" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202304368503252" target="_blank">Download下载</a>)</p> <p>SmartGallery是一个非常出色的照片滑动切换展示的jQuery插件。它支持12种不同的图片过渡切换效果。并有小缩略图。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/b5643e943ac41c3b7996900969cabcc8.jpg" width="570" height="399" /><br /> jQuery图片滑动切换插件 - 照片浏览效果</p> <h2>9 Xml Driven Vertical News Scroller Script Vscroller</h2> <p>(<a href="/misc/goto?guid=4958202312217493644" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202312958266089" target="_blank">Download下载</a>)</p> <p>读取Xml的新闻纵向滚动效果。Vscroller可以用于新闻滚动显示的效果。它通过读取一个XML文件，并通过其漂亮的效果表现出来。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/407002a4792c16c9fc7e298a4c4fa22d.jpg" width="570" height="312" /><br /> jQuery图片滑动切换插件 - 新闻滑动滚动效果</p> <h2>10 PushUp</h2> <p>(<a href="/misc/goto?guid=4958202318026769482" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202318787458522" target="_blank">Download下载</a>)</p> <p>这个插件的功能也已经超越图片滑动切换的范畴。它的作用是当网页需要弹出一个新层来展示更多内容时，它可以固定显示在网页的左边或右边，以展示更多的内容。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一" src="https://simg.open-open.com/show/8806792ea5ce3513e422f30cd2761611.jpg" width="570" height="350" /></p> <h2>11 Skitter</h2> <p>(<a href="/misc/goto?guid=4958202331377586229" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202331377586229" target="_blank">Download下载</a>)</p> <p>Skitter是一个外观很酷的图片幻灯片滑动切换jQuery插件。专门用于照片的切换展示，并且有很好的扩展性。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/83991ea60a473bd18f4f07fabb0b4122.jpg" width="570" height="266" /><br /> jQuery图片滑动切换插件 - Skitter</p> <h2>12 Diapo</h2> <p>(<a href="/misc/goto?guid=4958188556649243208" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958188556649243208" target="_blank">Download下载</a>)</p> <p>Diapo也是一款免费开源的jQuery图片幻灯片展示插件。你可以将其用在任何商业用途。它可以用于首页和多张照片切换展示。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/6b29f4ed7084e859661e333b3b144dac.jpg" width="570" height="355" /><br /> jQuery图片滑动切换插件 - Diapo</p> <h2>13 Craftyslide</h2> <p>(<a href="/misc/goto?guid=4958202365275428494" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202366695526448" target="_blank">Download下载</a>)</p> <p>Craftyslide也是一个基于jQuery的照片幻灯片展示插件。它的界面很简洁，整合到网页项目中的方法也很简单。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/bfebf445ba95cba4f59f6659951db267.jpg" width="570" height="342" /><br /> jQuery图片滑动切换插件 - Craftyslide</p> <h2>14 Responsly.js</h2> <p>(<a href="/misc/goto?guid=4958323261810690930" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323261810690930" target="_blank">Download下载</a>)</p> <p>Resonsly.js是一个基于CSS3和jQuery的交互式照片幻灯片滑动切换显示插件。其使用了最新的CSS3效果。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/7d6fb76ea01f0694552819f62aab9e0f.jpg" width="570" height="353" /><br /> jQuery图片滑动切换插件 - Responsly.js</p> <h2>15 Elastislide</h2> <p>(<a href="/misc/goto?guid=4958202377407487176" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958202378154996547" target="_blank">Download下载</a>)</p> <p>Elastislide是一款基于jQuery的交互式图片循环切换的幻灯片展示插件。这个插件的特点在于它可以自动调整和缩放图片的大小以适应各种尺寸的显示器。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/456a56e7e81a5a65039e506b7c9bab2c.jpg" width="570" height="308" /><br /> jQuery图片滑动切换插件 - Elastislide</p> <h2>16 Blueberry</h2> <p>(<a href="/misc/goto?guid=4958323264793601940" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323264793601940" target="_blank">Download下载</a>)</p> <p>Blueberry也是一个开源的jQuery交互式照片滑动切换插件。它是一个简约风格的插件。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/c45817442ed931bf012576222726a130.jpg" width="570" height="318" /><br /> jQuery图片滑动切换插件 - Blueberry</p> <h2>17 Slidorion</h2> <p>(<a href="/misc/goto?guid=4958196135099374021" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323267058257834" target="_blank">Download下载</a>)</p> <p>Slidorion这个图片滑动切换插件会在右侧显示补充文字内容。访问者点击对应的文字标题切换到相应的幻灯片。这是一个传统样式的滑动切换插件。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/887b0ecf0acbd5b8452bbc1c44ea36d7.jpg" width="570" height="366" /><br /> jQuery图片滑动切换插件 - Slidorion</p> <h2>18 bxSlider</h2> <p>(<a href="/misc/goto?guid=4958185321911978689" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323268580303274" target="_blank">Download下载</a>)</p> <p>bxSlider是一个优雅的幻灯片滑动切换插件。左侧显示图片，右侧显示文字内容。它没有边框，显示效果很好。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/43a66d42a3ddd86776284856f8409126.jpg" width="570" height="311" /><br /> jQuery图片滑动切换插件 - bxSlider</p> <h2>19 Minimit</h2> <p>(<a href="/misc/goto?guid=4958198857925627768" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323270100679482" target="_blank">Download下载</a>)</p> <p>Minimit是一个可以自定义的jQuery插件，它完美地支持了照片库和幻灯片的交互切换操作。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/0604014399376122988678f35d8b423d.jpg" width="570" height="287" /><br /> jQuery图片滑动切换插件 - Minimit</p> <h2>20 Galleria</h2> <p>(<a href="/misc/goto?guid=4958184256030223468" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958323271643828018" target="_blank">Download下载</a>)</p> <p>Galleria是介绍的第20个照片库幻灯片滑动切换jQuery插件。它支持照片的左右切换，暂停、标题和简介内容。也可以全屏和支持在新窗口中展示图片。是一款功能非常完善的照片滑动切换循环滚动展示插件。非常适合照片的展示。</p> <p class="img-middle"><img alt="40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二" src="https://simg.open-open.com/show/6556cf973d2c530e12486f1497d550b0.jpg" width="570" height="328" /><br /> 转自：<a href="/misc/goto?guid=4958323272435871370">http://www.techolics.com/jquery/20111229_152.html</a></p>