基于jquery的15款幻灯片插件

1，Gallerific


Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的高质量画廊相册展示工具。

2，ZoomImage

zoomimage ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。

3，EasySlider

Easy Slider 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。

4，The Slider from Barack Obama's website

一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。

5，CodaSlider

CodaSlider，又一个不错的滑动控制效果。

6，jQuery Slider II

jQuery Slider II 的布局非常符合操作习惯，在底部列出带滚动条的缩略图控制列表，然后在上面显示对应图片的大图浏览，非常适合做高级相册。

7，Beautiful Slider

Beautiful Slider， 光看这个效果图你就知道这个插件有多棒了吧，是的，这个插件实现的效果已经不逊色于Flash完成的效果，整体表现流畅，文字显示效果更是创意独特。

８，LoopedSlider

loopedSlider是又一个任意内容滚动切换的幻灯片插件，使用操作简单。

9，SpaceGallery

SpaceGallery是一个全新的jQuery插件，点击当前图片，会自动放大消失，同时后面的图片向前展示，有一种时光机器的感觉。

10，jQuery Popeye

11，Noobslide

12，Accessible News Slider

13，SmoothGallery

SmoothGallery是一个最好的 javascript 幻灯片效果之一，可以实现各种不同的幻灯片转换效果。

14，jQuery Multimedia Portfolio

jQuery Multimedia Portfolio是一个基于jQuery 的滑动效果插件,除了可以展示图片之外，还可以加入各种不同类型的多媒体文件。

15，s3Slider

s3Slider是一个非常简单实用的流畅幻灯片效果，这个插件被应用在无数的WordPress专业主题模板中。

英原: 15 jQuery image carousels for slideshows and galleries
中译: bbon

赞 (0)

相关推荐

  • 分享10篇优秀的jQuery幻灯片制作教程及应用案例

    分享10篇优秀的jQuery幻灯片制作教程及应用案例

    幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天要给大家分享的是10篇非常棒的 jQuery 幻灯片教程及16个优秀的 jQuery 幻灯片应用案例. 10篇 jQuery 幻灯片制作教程Create Beautiful jQuery slider tutorial jQuery Plugin – Feature List Create an Image Rotator with Description (CSS/jQuery) Moving Box

  • jQuery 幻灯片插件(带缩略图功能)

    jQuery 幻灯片插件(带缩略图功能)

    应朋友的邀请,帮他公司做一个幻灯播放效果,效果如下: 缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度.假设当前正播放到第0张图片,则排列情况如下: 0 1 4 2 3 按逆时针方向转一张图后的排列情况如下: 4 0 3 1 2 这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下: 本人考虑将缩略图轮转与大图的滚进分开两部分,缩略图轮转做为一个单独的jQuery插件,由此插件中的事件带动大图的滚进.下面先

  • 20个非常棒的 jQuery 幻灯片插件和教程分享

    20个非常棒的 jQuery 幻灯片插件和教程分享

    滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天这篇文章就与大家分享20个非常棒的 jQuery 幻灯片插件和教程. > Slider Gallery with jQuery Create an Image Rotator with Description (CSS/jQuery) Create a Slick and Accessible Slideshow Using jQuery Simple JQuery Image Slide Sho

  • 10个基于Jquery的幻灯片插件教程

    10个基于Jquery的幻灯片插件教程

    常听有人说jquery 比较难学,只要你感兴趣,实现幻灯片效果还是蛮有乐趣的,下面的Jquery 幻灯片教程将引领你进入Jquery插件开发的喜悦中,希望对大家有帮助. 1.        jQuery Easy Slides v1.1 在所有的Jquery幻灯片插件中,Jquery easy sildes算是最容易使用的一个. 2.       The Piecemaker XML Gallery 非常酷的具有3D效果的jquery 插件,有详细的制作方法,有兴趣的朋友可以研究一下它的源代码.

  • jQuery实现的小图列表，大图展示效果幻灯片示例

    jQuery实现的小图列表，大图展示效果幻灯片示例

    本文实例讲述了jQuery实现的小图列表,大图展示效果幻灯片.分享给大家供大家参考,具体如下: 运行效果图如下: 全部代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • 8款非常棒的响应式jQuery 幻灯片插件推荐

    8款非常棒的响应式jQuery 幻灯片插件推荐

    这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推

  • jQuery Tools tab(幻灯片)

    jQuery Tools tab(幻灯片)

    html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • Jquery图片滚动与幻灯片的实例代码

    1.图片滚动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>&l

  • 基于Jquery制作的幻灯片图集效果打包下载

    待改进部分 1.大图可根据浏览器分辨率自动缩放,目前是按照固定的宽和高显示,超出部分隐藏. 2.大图现在是直接载入了所有,若图片很多时,体验不好.可改为异步加载,或者延迟加载,这个可以用jquery控件lazyload实现. 3.缩略图是根据上传时设定的参数直接生成的,如果是竖形图片,会出现被压缩的情况.可以改为只显示局部,超出部分隐藏. 4.缩略图列表的滑动采用了jcarousellite插件,如果将幻灯片提取为插件的话,需要整合为一个. 5.目前大图区域和缩略图区域是相对独立的,优点是比较直

  • 30个精美的jQuery幻灯片效果插件和教程

    30个精美的jQuery幻灯片效果插件和教程

    这是一种在有限的网页空间内展示更多内容的良好方式,而且能吸引用户注意力.如果你想知道这是如何实现的,那么本文收集的30个幻灯片插件和教程将帮助您实现这种效果. JCOVERFLIP Live Demo CREATE A CUSTOM IMAGE GALLERY WITH JCAROUSEL Live Demo COIN SLIDER Live Demo LOOPEDSLIDER Live Demo NIVO SLIDER Live Demo COLORFUL SLIDERS WITH JQUER

  • 33个优秀的jQuery 教程分享(幻灯片、动画菜单)

    33个优秀的jQuery 教程分享(幻灯片、动画菜单)

    How To Build a Sliding Feature Slideshow with jQuery Fullscreen Gallery with Thumbnail Flip Moving Boxes Content with jQuery Animated Skills Diagram with Raphaël jQuery and CSS single page portfolio, a vertical parallax navigation How to Make Auto-Ad

  • js实现幻灯片效果(基于jquery插件)

    使用jquery插件jquery.smallslider.js也能实现幻灯片效果. htm代码如下: 复制代码 代码如下: <div id="flashbox" class="smallslider"> <ul style="position: absolute; top: 0px; width: 3225px;"> <li class="" style="float: left;&qu

随机推荐