8 款超绚丽的 jQuery 焦点图动画

开发 前端
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高。我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大 屏的焦点图占用大片的页面空间,从而吸引用户的眼球。

随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高。我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大 屏的焦点图占用大片的页面空间,从而吸引用户的眼球。本文要分享的就是一些超绚丽的jQuery焦点图动画插件,有些不仅基于jQuery,还带有 CSS3的动画特效,因此显得更加炫酷。

1、jQuery实用图片滑块焦点图 支持移动端滑动

今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用。

jquery-image-mobile-silder

在线演示        源码下载

2、HTML5/jQuery 3D焦点图插件 多种超酷切换动画

之前我们分享过一些很酷的焦点图插件了,有些是基于jQuery的焦点图应用,今天我们要分享一款基于HTML5和jQuery的3D焦点图插件,该HTML5焦点图有多种超酷的切换动画,包括3D百叶窗、3D翻转等特效,有些切换效果在高版本Chrome中有效果。

Slicebox

在线演示        源码下载

3、jQuery自动滑块焦点图插件 带缩略图

今天我们再来介绍一款比较实用的jQuery焦点图插件,它的特点是可以自动播放图片,并可以设置暂停。另外,这款焦点图的图片切换动画也比较多样化,而且在图片下方的切换按钮上鼠标悬停将会出现当前图片的缩略图,并没有炫酷的动画,总体来讲是一款比较实用的jQuery焦点图。

jquery-auto-slider-thumbnail

在线演示        源码下载

4、jQuery/CSS3实现全屏图片滑块焦点图动画

今天我们要来分享一款非常大气的jQuery/CSS3全屏焦点图插件,这款焦点图有以下几个特点:首先图片可以全屏切换滑动,显得非常大气;其次焦点图有缩略图导航,点击缩略图可以切换至相应的图片;最后就是图片有阴影,配合天空白云的背景,像是浮动一样,非常立体。

jquery-css3-image-slider

在线演示        源码下载

5、jQuery图片垂直滚动焦点图 导航带图标

今天我们要再来分享一款很实用的jQuery焦点图插件,这款jQuery焦点图的图片是垂直分组滚动的,你可以自定义图片组,也可以定义图片组中图片的数量,鼠标滑过指定的导航上时,相应的图片组即可上下切换,另外,焦点图的切换导航上有小图标,显得更加美观。

jquery-ver-image-player-icon

在线演示        源码下载

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

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

jquery-auto-image-slider

在线演示        源码下载

7、简单实用的jQuery横向图片滚动焦点图插件

今天的这款jQuery焦点图插件看起来非常简单,但是无论从外观和实用价值上看都相当不错。这款jQuery焦点图的图片是横向滚动的,两侧均有左右滑动按钮。

simple-jquery-image-player

在线演示        源码下载

8、jQuery底部带缩略图的焦点图插件

今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果。

jquery-slider-image-bottom

在线演示        源码下载

以上的很多jQuery焦点图动画插件都还是挺实用的,如果你有需要,可以下载源码并将它们整合到自己的页面中去,我们将继续为大家分享更多的前端开发资源。

本文链接:http://www.codeceo.com/article/8-cool-jquery-slider.html

 

责任编辑:王雪燕 来源: 码农网
相关推荐

2015-01-13 11:19:19

2024-07-29 08:43:57

2024-07-01 08:19:56

2011-04-17 09:23:42

jQueryJavaScriptJava

2012-02-01 09:11:00

jQuery插件

2016-01-25 09:49:20

jQuery图片滑块动画

2012-11-21 09:53:19

jQueryWeb

2022-09-12 08:31:41

CSS3伪类URI

2011-06-07 09:22:43

jQueryjQuery插件

2012-12-18 09:49:57

jQueryJavaScriptJS

2014-03-21 09:52:29

jQuery动画插件

2011-08-31 17:47:33

jQuery插件工具

2014-07-14 12:37:36

jQueryCSS3

2014-05-26 16:37:10

jQueryCSS3

2015-12-01 09:52:03

CSS3动画源码

2011-02-17 09:29:45

WebjQueryJavascript

2015-10-10 14:22:46

jQueryCSS3栏菜单

2013-12-02 15:10:56

jQuery插件

2012-05-25 15:48:59

HTML5

2013-12-23 11:01:14

命令Linux命令
点赞
收藏

51CTO技术栈公众号