返回 登录
7

10款精美实用的jQuery焦点图动画推荐

在上一波的文章中,我们介绍了9个精巧绚丽的jQuery图片滑块动画,并且每一个焦点图动画都附有源代码下载。本文将继续为大家分享一些最新的jQuery焦点图动画,这些jQuery焦点图插件都比较精美,而且也非常实用,只要简单地配置便可将这些jQuery焦点图动画应用到自己的网站中去了。

1、jQuery淡入淡出切换效果的焦点图插件

昨天我们为大家分享过一款多图切换jQuery图片滑块插件,宽频展示,非常大气。今天我们要再来分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是切换效果可以选择,有左右滑动和淡入淡出两种动画效果,焦点图的使用液比较简单。

jquery-inout-image-slider

在线演示1 / 在线演示2 / 在线演示3 / 源码下载

2、jQuery横向图片手风琴插件

之前我们已经向大家分享过很多基于jQuery的手风琴插件,包括jQuery手风琴菜单等,比如炫酷的jQuery手风琴图片和菜单插件及源码这篇文章中就包含了很多jQuery手风琴插件。今天我们要分享另外一款jQuery横向图片手风琴插件,切换图片时可以展示图片文字描述,效果非常不错。

jquery-hor-image-accordion

在线演示 / 源码下载

3、jQuery自动轮播图片焦点图插件

今天我们要继续来分享一款非常实用的jQuery焦点图插件,和其他的jQuery焦点图插件一样,它同样支持多张图片的任意跳转切换,同时,焦点图切换方式是水平的,而且相当流畅,因为这款jQuery焦点图实现很简单。

jquery-auto-image-slider

在线演示 / 源码下载

4、jQuery轮播切换组件 可播放多张图片

这是一款基于jQuery的图片轮播组件,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片。当然,你也可以手动切换图片,只要点击缩略图即可,这款jQuery轮播切换组件配置比较方便,唯一的不足就是只能指定8张图片,灵活性不强。

8-screen-jquery-slider

在线演示 / 源码下载

5、jQuery上下切换焦点图 带缩略图悬浮

今天我们继续为大家分享一款小巧而实用的jQuery焦点图,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的。这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮缩略图,点击缩略图也可以播放图片。

jquery-up-down-slider

在线演示 / 源码下载

6、jQuery左侧Tab切换的图片滑块插件

这次我们要来分享一款很实用的jQuery图片滑块插件,这款jQuery图片滑块插件的特点是它的切换按钮是Tab样式的,当我们将鼠标滑过或者点击tab选项时,就可以切换到相应的图片上去。并且,图片上方还可以悬浮图片的标题或者文字描述信息。

jquery-ver-tab-image-slider

在线演示 / 源码下载

7、右侧带缩略图导航的jQuery焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可实现图片的上下切换动画。

jquery-menu-image-slider

在线演示 / 源码下载

8、多图切换jQuery图片滑块插件

之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件。这次要给大家分享的也是一款jQuery图片滑块插件,它的特点是可以同时切换多张图片,并且每屏都有缩略图,点击缩略图也可切换图片。

jquery-mult-image-slider

在线演示 / 源码下载

9、jQuery仿iPhone解锁滑块焦点图

这是一款基于jQuery的仿iPhone解锁滑块焦点图,还记得早期iPhone解锁装置么,现在我们将这样的样式应用到这款jQuery焦点图上。你可以滑动鼠标,该解锁装置就会跟随鼠标一起滑动,同时,图片也就完成了切换的效果。

jquery-iphone-image-slider

在线演示 / 源码下载

10、宽屏可左右切换的jQuery焦点图插件

昨天我们刚分享过9个精巧绚丽的jQuery图片滑块动画,里面有很多实用的jQuery焦点图插件,大家可以看看。今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片。

jquery-full-image-slider-switch

在线演示 / 源码下载

以上就是10款精美实用的jQuery焦点图动画,欢迎收藏分享。 转载请注明原文来源:http://www.html5tricks.com/10-useful-jquery-slider.html

评论