jQuery 图片轮播插件

图片轮播是网站中的常用功能,下面介绍一些较好的jquery插件

1、nivo slider 

这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本

特点如下:

  • ✓  16个独特的过渡效果
  • ✓  简洁和有效的标记
  • ✓  加载参数设置
  • ✓  内置方向和导航控制
  • ✓  压缩版本大小只有12KB
  • ✓  支持链接图像
  • ✓  支持 HTML 标题
  • ✓  3套精美光滑的主题
  • ✓  在MIT许可下免费使用
  • ✓  支持响应式设计
预览:


官方地址:http://dev7studios.com/plugins/nivo-slider/

2、3D Image Slider

非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示,立体效果是基于 CSS3 实现的,

请使用最新 Chrome,Firefox 和 Safari 浏览器浏览效果。

预览:


官方地址:http://tympanus.net/Development/Slicebox/

3、Flexslider

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果,

这款插件也是 2011 年度最佳 jQuery 插件,今年被 WooThemes 收购并发布了2.0版本,因此继续入选 2012 年度榜单

特点:

  • ✓  简单的,语义化的标签;
  • ✓  支持所有主流的浏览器;
  • ✓  水平/垂直滑动和淡入淡出动画;
  • ✓  支持多个滑块,回调 API,以及更多;
  • ✓  触摸滑动支持硬件加速;
  • ✓  能够自定义导航选项。
  • ✓  兼容最新版本的 jQuery。
预览:

4、Elastislide

Elastislide 是一款非常优秀的响应式 jQuery 幻灯片插件,集成了 Touchwipe 插件以支持触屏设备。

特点:提供了四种效果

  • ✓  水平图片传送带
  • ✓  垂直图片传送带
  • ✓  固定在屏幕底部
  • ✓  缩略图形式预览
预览:


官方地址:http://tympanus.net/Development/Elastislide/

5、3D Gallery

特别推荐!精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中。

支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效果。

预览:

 

官方地址:http://tympanus.net/Development/3DGallery/

6、Image Transitions

基于 jQuery 和 CSS3 动画实现的图片过渡效果。

共有Flip、Rotation、Multi-flip、Cube、Unfold等6种效果。

预览:

 

 官方地址:http://tympanus.net/Development/ImageTransitions/

7、Slidesjs

Slides 是一个非常简洁的 jQuery 图片轮播插件,其特点是自动循环播放、图片预加载以及自动分页功能。

     预览:


    官方地址:http://slidesjs.com/

    8、Galleria

    这是一个响应式的 JavaScript 相册插件,目的是让制作专业相册功能变得更加简单。

    Galleria 支持缩略图导航、全屏浏览和自动播放功能,支持 iPhone,iPad Touch 等移动触屏设备。

    预览:

     

     官方地址:http://galleria.io/

    9、AnythingSlider

    AnythingSlider 由CSS-Tricks 的Chris Coyier 设计,功能齐全,效果精美,应用十分广泛。

    主要特色
    • ✓  简单的,语义化的标签;
    • ✓  水平/垂直滑动和淡入淡出动画;
    • ✓  主题可以适用于单个滑块;
    • ✓  同一个页面可以显示多个滑动模块;
    • ✓  提供了丰富的自定义参数选项。
    • ✓  支持所有主流的浏览器;
    预览:

     

     官方地址:http://css-tricks.com/examples/AnythingSlider/

    10、WOW Slider

    这是另外一款效果精美的响应式图片轮播插件,有众多专业的模板。

    提供了 Rotate,BlurFlipBlastFlyBlindsSquaresSlicesBasicFade 等精美的轮播效果。

     预览:


    官方地址:http://wowslider.com/demo.html

    11、An HTML5 Slideshow

    基于 HTML5 Canvas 和 jQuery 制作的图片幻灯片效果,有详细的制作教程可以学习。

    详细的制作教程和实现思路参考这里,An HTML5 Slideshow With Canvas & jQuery

     预览:


    官方地址:http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.html

    12、Awkward Showcase

    提供常见的图片轮播效果,可以前后切换,也可以通过页码导航,能够在一页上显示也可以幻灯片形式显示。

    演示:

    官方地址:http://showcase.awkwardgroup.com/

    持续更新............

    • 2
      点赞
    • 1
      收藏
      觉得还不错? 一键收藏
    • 0
      评论

    “相关推荐”对你有帮助么?

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值