超酷实用的jQuery焦点图赏析及源码

  • A+
所属分类:脚本语言

  焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效。今天我们要分享一些超酷而且实用的jQuery焦点图插件,并分享它们的源代码。

 1、jQuery多动画切换焦点图

  之前我们已经分享过很多超酷的jQuery焦点图插件了,而且也都相当实用。今天我们要再来介绍一款可实现多种切换动画的jQuery焦点图,这款焦点图整体非常简单,左右两侧各有一个上一张和下一张的切换按钮。每张图片在切换时也都有各不相同的动画特效。

jquery-mult-animation-silder

在线演示        源码下载

 2、jQuery带缩略图焦点图插件 自定义滑块内容

  今天我们要来分享一款基于jQuery的焦点图插件,这款jQuery焦点图功能十分强大,有以下两个特点:第一是焦点图带有缩略图预览,当鼠标滑过对应图片的按钮时,即可弹出缩略图;第二是焦点图的滑块内容可以自定义,可以是图片,也可以是任何HTML元素,因此也非常的灵活。另外,焦点图的切换动画也有多种,非常炫酷。

jquery-custom-slider-thumbnail

在线演示        源码下载

 3、jQuery仿苹果样式焦点图插件

  这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气。焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用。

jquery-apple-image-slide

在线演示        源码下载

 4、简易jQuery焦点图插件 填充式切换按钮

  这又是一款简易型的jQuery焦点图插件,这款焦点图插件可以进行自动播放,也可以点击下方的填充式切换按钮进行手动切换,非常方便。另外,其简易的外观让其加载速度十分快,非常适合高性能的网页上面。该jQuery焦点图的图片切换动画是淡入淡出的效果,切换也十分流畅。

jquery-image-slider-full-switch

在线演示        源码下载

 5、jQuery多图并列焦点图插件

  今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示。和其他jQuery焦点图一样,这款焦点图插件的图片下方也有一排小按钮,可以任意切换图片。另外,每张图片也都有文字描述。

jquery-mult-image-player

在线演示        源码下载

 6、jQuery 3D图片滑块焦点图插件

  这是一款很酷的jQuery 3D焦点图插件,和之前分享的jQuery焦点图不同的是,这款焦点图插件的图片切换播放样式是3D的,图片就像立方体一样可以上下翻滚,同时你不仅可以点击焦点图的左右切换按钮,也可以通过图片下方的小按钮进行图片切换。

jquery-3d-adaptor

在线演示        源码下载

 7、jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

  之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片。另外,这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮,可以让你更方便地浏览图片。

jquery-3d-circle-image-slider

在线演示        源码下载

 8、jQuery宽屏游戏焦点图 Tab图片切换按钮

  今天我们要来分享一款全新的jQuery焦点图插件,这款jQuery焦点图是宽屏的,因此外观看上去非常大气,在这里我们也分享过很多宽屏的jQuery焦点图插件,但是这款jQuery焦点图在切换图片上不仅具有淡入淡出的动画特效,而且切换的按钮式tab形式的,图片切换也十分流畅。

jquery-full-slider

在线演示        源码下载

  以上就是很不错的jQuery焦点图插件,欢迎收藏分享。

  via:html5tricks

QQ群: WEB开发者官方总群(196171896) 验证消息:Admin10000
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin