9个精巧绚丽的jQuery图片滑块动画

来源:设计前沿收集 作者:佚名 时间:2015-06-19
jQuery图片滑块动画即jQuery焦点图,它可以完成网页上的多张图片的轮流播放,并且图片切换时附上绚丽的动画效果。本文主要向大家分享了一些精巧绚丽而且实用的jQuery图片滑块插件,这些图片动画插件可以帮助你完成更炫酷的图片展示,一起来看看吧。
 

1、jQuery/HTML5超炫全屏焦点图插件

 
这次我们要来分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩。另外,这款jQuery焦点图插件的特点是全屏的效果,因此看上去也非常的大气和整体。
 
jquery-html5-full-slider
 

在线演示源码下载

 

2、jQuery鼠标滑动切换焦点图

 
这又是一款jQuery焦点图插件,和其他焦点图的功能类似,它也可以自定义图片的数量,点击切换按钮进行图片切换。另外,这个jQuery焦点图的一大特点是支持鼠标滑动切换图片,因此如果将它应用在移动设备上,也可以支持触屏滑动切换。
 
jquery-drag-image-slider
 

在线演示源码下载

 

3、jQuery带爆炸特效的焦点图动画

 
这次要带来的也是一款jQuery焦点图插件,它的特点是当图片切换时,图片会发生爆炸的动画特效,非常有创意,也是一款很不错的jQuery焦点图应用。
 
jquery-explosion-slider
 

在线演示源码下载

 

4、jQuery可自动播放动画的焦点图插件

 
之前我们已经分享过很多非常实用的jQuery焦点图插件,大部分对开发者来说基本上可以直接拿来使用。今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果。
 
jquery-slider-animation
 

在线演示源码下载

5、带缩略图水平切换的jQuery焦点图插件

今天我们要来分享一款非常实用的jQuery焦点图插件,这款jQuery焦点图的特点是每一张图片都有一个缩略图,并且在鼠标滑过缩略图时图片将会悬浮起来;另外一点就是焦点图右侧有图片的文字描述,这些文字信息可以自定义;最后就是图片左右切换动画虽然比较简单,但是非常流畅。
 
jquery-thumbnail-silider
 

在线演示源码下载

 

6、jQuery图片左右滑动焦点图插件

 
这又是一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换。另外,这款jQuery焦点图是宽屏的,看上去十分大气,很适合产品图片的展示。
 
jquery-switch-slider
 

在线演示源码下载

 

7、jQuery全屏广告图片焦点图

 
全屏的jQuery焦点图插件在之前我们已经介绍过很多了,比如这款jQuery全屏滑块焦点图 可自定义内容。今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅。
 
jquery-full-ad-slider
 

在线演示源码下载

 

8、jQuery宽屏时间轴焦点图插件

 
这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换。另外,在图片上方也可以放置自定义样式的文字。
 
jquery-full-time-slider
 

在线演示源码下载

 

9、支持鼠标拖拽滑动的jQuery焦点图

 
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片。
 
jquery-slider-with-drag
 

在线演示源码下载

 
以上就是9个精巧绚丽的jQuery图片滑块动画,欢迎分享收藏。
 
转载请注明原文:http://www.html5tricks.com/9-jquery-image-slider.html