• 前端不容错过的jQuery图片滑块插件


    作为前端开发者,我们会碰到很到各种各样的jQuery插件,但老实说,很少有自己写的。今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到。

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

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

    jquery-mult-image-player

    在线演示        源码下载

    2、jQuery动画焦点图 可自动播放图片

    这是一款简单而实用的jQuery焦点图插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图片之上。由于其简单的配置,这款jQuery焦点图可以很方便地与你的网站相结合。

    jquery-auto-play-image

    在线演示        源码下载

    3、jQuery缩略图动态缩放焦点图

    今天我们要来分享一款jQuery焦点图,这款jQuery焦点图的图片切换按钮是几张图片的缩略图,鼠标滑过缩略图即可切换至相应的图片。焦点图的切换动画是图片的动态缩放,动画效果还算新颖,图片切换也比较流畅,是一款值得一试的jQuery焦点图。

    jquery-thumb-zoom-player

    在线演示        源码下载

    4、jQuery全屏滑块焦点图 可自定义内容

    之前我们已经分享过很多jQuery焦点图插件了,很多焦点图都非常实用,可以应用到自己的网站上去。这次要分享的也是一款基于jQuery的全屏方式滑块焦点图插件,滑块的内容可以自定义,可以是几张图片的组合,也可以是横幅广告。

    jquery-full-image-slider

    在线演示        源码下载

    5、jQuery/CSS3动画相册图片浏览插件

    之前我们分享过一款基于jQuery的仿QQ空间相册浏览插件,功能上已经十分完善,但是缺少动画效果。今天这款jQuery相册插件正好弥补了动画的缺陷,由于CSS3特性的利用,当我们点击图片浏览的时候,缩略图就会以淡入淡出的动画效果消失,然后出现原始图片。同时你也可以点击左右按钮来逐一浏览相册中的图片。

    jquery-css3-gallery-animation

    在线演示        源码下载

    6、jQuery纵向滑块焦点图插件 图片切换流畅

    今天我们要来分享一款效果很酷的jQuery焦点图,它的Tab切换方式是纵向的,而且图片切换的方式也是纵向的,另外整个jQuery焦点图的色彩非常棒,给人一种神秘的感觉。焦点图的图片切换还是比较流畅的。

    jquery-ver-image-slider

    在线演示        源码下载

    7、jQuery/CSS3立方体翻转3D全屏焦点图

    天我们要来分享一款非常大气的HTML5/CSS3 3D全屏焦点图,在页面两侧,有两个很立体的左右箭头进行图片切换。这款HTML5焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,我们已经将文字替换成图片,效果更酷。

    html5-3d-cube-image-player

    在线演示        源码下载

    希望以上jQuery图片滑块插件能给你带来帮助,欢迎收藏分享。

    本文链接:http://www.html5tricks.com/jquery-image-slider.html
    本文作者:html5tricks – 超人

  • 相关阅读:
    Netty解决粘包和拆包问题的四种方案
    springboot 1.4 CXF配置
    聊聊springboot2的embeded container的配置改动
    MFC函数——CWnd::OnCreate
    《开发专家 Visual C 开发入行真功夫》笔记
    MFC中UpdateData()函数的使用
    Visual Studio 2008 添加MScomm控件的方法
    Visual Studio 2008 调试运行Bug记录
    《VS2010/MFC编程入门教程》——读书笔记
    《C++程序设计教程——给予Visual Studio 2008》读书笔记3章
  • 原文地址:https://www.cnblogs.com/html5tricks/p/3835016.html
Copyright © 2020-2023  润新知