40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片，并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件，我们可以很简单地直接将这些图片滑动插件嵌入到网页中，很容易就得到了即酷又实用的jQuery图片滑动效果。在这是jQuery滑动切换插件系列的第二篇，我们将向大家分享40多种非常有用，又有创意的jQuery图片滑动插件，及其演示和下载地址。你可以按你网页风格找到合适的jQuery图片滑动插件，然后点击演示链接查看具体效果，然后下载此jQuery滑动插件。希望你能在这40个jQuery图片滑动插件中找到你想要的。

11 Skitter

(Demo演示 | Download下载)

Skitter是一个外观很酷的图片幻灯片滑动切换jQuery插件。专门用于照片的切换展示，并且有很好的扩展性。


jQuery图片滑动切换插件 - Skitter

12 Diapo

(Demo演示 | Download下载)

Diapo也是一款免费开源的jQuery图片幻灯片展示插件。你可以将其用在任何商业用途。它可以用于首页和多张照片切换展示。


jQuery图片滑动切换插件 - Diapo

13 Craftyslide

(Demo演示 | Download下载)

Craftyslide也是一个基于jQuery的照片幻灯片展示插件。它的界面很简洁，整合到网页项目中的方法也很简单。


jQuery图片滑动切换插件 - Craftyslide

14 Responsly.js

(Demo演示 | Download下载)

Resonsly.js是一个基于CSS3和jQuery的交互式照片幻灯片滑动切换显示插件。其使用了最新的CSS3效果。


jQuery图片滑动切换插件 - Responsly.js

15 Elastislide

(Demo演示 | Download下载)

Elastislide是一款基于jQuery的交互式图片循环切换的幻灯片展示插件。这个插件的特点在于它可以自动调整和缩放图片的大小以适应各种尺寸的显示器。


jQuery图片滑动切换插件 - Elastislide

16 Blueberry

(Demo演示 | Download下载)

Blueberry也是一个开源的jQuery交互式照片滑动切换插件。它是一个简约风格的插件。


jQuery图片滑动切换插件 - Blueberry

17 Slidorion

(Demo演示 | Download下载)

Slidorion这个图片滑动切换插件会在右侧显示补充文字内容。访问者点击对应的文字标题切换到相应的幻灯片。这是一个传统样式的滑动切换插件。


jQuery图片滑动切换插件 - Slidorion

18 bxSlider

(Demo演示 | Download下载)

bxSlider是一个优雅的幻灯片滑动切换插件。左侧显示图片，右侧显示文字内容。它没有边框，显示效果很好。


jQuery图片滑动切换插件 - bxSlider

19 Minimit

(Demo演示 | Download下载)

Minimit是一个可以自定义的jQuery插件，它完美地支持了照片库和幻灯片的交互切换操作。


jQuery图片滑动切换插件 - Minimit

20 Galleria

(Demo演示 | Download下载)

Galleria是介绍的第20个照片库幻灯片滑动切换jQuery插件。它支持照片的左右切换，暂停、标题和简介内容。也可以全屏和支持在新窗口中展示图片。是一款功能非常完善的照片滑动切换循环滚动展示插件。非常适合照片的展示。


jQuery图片滑动切换插件 - Galleria
原文出处

赞 (0)

相关推荐

  • jquery实现滑动图片自己测试的例子

    jquery实现滑动图片自己测试的例子

    最近正在回顾之前的一些基础知识,用jquery写了一个图片滑动的插件,虽然还是有些问题存在,用法很简单,只要在对目标元素绑定slideW()函数即可,该函数最多支持两个输入,分别是图片变化之后的宽度,以及动画的速度,如果不输入,则采用默认的宽度以及默认的速度. 下面是我自己测试的例子: 复制代码 代码如下: //html代码 <div class = "content"> <ul class = "list"> <li class =

  • jQuery实现图片滑动效果

    jQuery实现图片滑动效果

    思路:当鼠标进入元素时,触发hover中的第一个函数,离开时触发hover中的第二个函数. 如图所示: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ width: 1000px; m

  • jquery animate图片模向滑动示例代码

    jquery animate图片模向滑动示例代码

    这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认

  • jQuery插件Slider Revolution实现响应动画滑动图片切换效果

    这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque

  • jQuery点击后一组图片左右滑动的实现代码

    复制代码 代码如下: $(function () { var page = 1;//初始化page变量 var i = 2;//每版放两组图片 var $pictureShow = $(".pictures4"); var downwidth = $pictureShow.width();//获取框架内容的宽度,既每次移动的大小 var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片 var pa

  • JQuery实现简单的图片滑动切换特效

    JQuery实现简单的图片滑动切换特效

    JQuery实现简单的图片滑动切换特效 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>t图片的滑动</title> <meta charset="utf-8" /> <style type="text/css" > *{ margin:0

  • 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

    40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

    以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址.你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,然后下载此jQuery滑动插件.希望你能在这40个jQuery

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • jQuery实现图片与文字描述左右滑动自动切换的方法

    jQuery实现图片与文字描述左右滑动自动切换的方法

    本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

    40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

    在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.在这是jQuery滑动切换插件系列的第二篇,我们将向大家分享40多种非常有用,又有创意的jQ

  • jquery实现界面点击按钮弹出悬浮框

    jquery实现界面点击按钮弹出悬浮框

    本文实例为大家分享了jquery实现界面点击按钮弹出悬浮框的具体代码,供大家参考,具体内容如下 首先定义两个div: 一个是背景,一个是悬浮窗. <input id="Button1" type="button" value="点击弹出层"/>                <!--弹出层时背景层DIV-->         <div id="fade" class="black_ove

  • jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】

    jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】

    本文实例讲述了jQuery实现鼠标选中文字后弹出提示窗口效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-

  • jQuery实现点击任意位置弹出层外关闭弹出层效果

    在之前做项目的时候经常会在主页面上点击某个按钮,右侧弹出一个div输出对应内容的详细信息.此时,我是希望在鼠标点击弹出层外的时候关闭该弹出层,主要思想就是: 找到鼠标点击的那个元素 判断这个元素是否在指定区域内,其实就是判断它的父元素是不是弹出层 如果不是就对弹出层进行hide,如果是就不进行任何操作 具体实现 该代码需要使用jQuery,代码如下: $(document).mousedown(function(e){ if($(e.target).parent("#info").le

  • jQuery实现点击文本框弹出热门标签的提示效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现点击

  • jQuery实现的鼠标滑过弹出放大图片特效

    jQuery实现的鼠标滑过弹出放大图片特效

    本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等, 我们先来看个演示图 下面是代码实例: <link rel="stylesheet" href="../css/common.css" type="text/css" /> <script type="text/javascript" src="../

  • 分享28款免费实用的 JQuery 图片和内容滑块插件

    分享28款免费实用的 JQuery 图片和内容滑块插件

    jQuery Slider插件一般是由滑块与滑动按钮组成,也有一些带暂停和继续按钮的.一般使用的Slider滑块插件,按照展示方式,可以分为两种:一种是为水平滑动:另一种是垂直滑动.当然具体的特效就有很多种了,不一一解释了.大部分的都是一些类似幻灯片的效果,也有带视差效果的.实现方式也大都是基于jquery+html5+CSS3,大部分插件的兼容性都不错. 今天给大家分享的就是一些网站中常用的和不常用的一些Jquery Slider插件.这些jquery插件可以实现图片和内容的滑块效果.有一些非

  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

    本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

  • 基于jquery css3实现点击动画弹出表单源码特效

    基于jquery css3实现点击动画弹出表单源码特效

    下图给大家展示了使用jquery css实现的点击动画弹出表单源码,有上传表单.删除表单.发送评论表单,都是通过鼠标点击图标按钮动画弹出的表单源码特效. 效果图展示如下: 在线预览    源码下载 html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog&q

随机推荐