开发者社区> 楚广明> 正文

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

简介: 在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
+关注继续查看

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

1 FlexSlider

(Demo演示 | Download下载)

FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果。适合所有初级和高级网页设计师使用。

jQuery图片滑动切换插件 - Flexslider
jQuery图片滑动切换插件 - Flexslider

2 Bubble Slidershow Effect with jQuery

(Demo演示 | Download下载)

基于jQuery的泡泡图片滑动切换效果。Bubble Slidershow是一个很有意思的jQuery图片滑动切换插件。它通过泡泡效果来进行图片切换,动态效果很特别。非常适合做风景等照片的切换展示。Bubble Slidershow的代码是模块化的,你可以按你的需求随意修改。

jQuery图片滑动切换插件 - 泡泡效果
jQuery图片滑动切换插件 - 泡泡效果

3 Responsive Image Gallery with Thumbnail Carousel

(Demo演示 | Download下载)

这个图片滑动切换插件非常适合用于照片的切换显示,它使用Elastislide的缩略图。用户可以点击缩略图或左右按钮显示对应的图片。另外它支持用户点击键盘的左右方向键切换图片。

jQuery图片滑动切换插件 - 照片浏览
jQuery图片滑动切换插件 - 照片浏览

4 Circular Content Carousel with jQuery

(Demo演示 | Download下载)

这个图片滑动切换插件合适用于步骤讲解,或产品介绍。当用户点击More按钮时当前内容会移动到最左边,然后显示一个文本框用于显示更多信息。并且可以点击左、右按钮切换内容。

jQuery图片滑动切换插件 - 滑动及弹出层
jQuery图片滑动切换插件 - 滑动及弹出层

5 Lateral On-Scroll Sliding with jQuery

(Demo演示 | Download下载)

这个插件其实已经超越了图片滑动切换的功能。它的作用是用户可以点击按钮,然后自动向上或向下滑动定位到网页的某个位置。网页的内容分成左右两栏,插件的滑动很流畅。可以用于时间线的定位。

jQuery图片滑动切换插件 - 时间轴动态滑动
jQuery图片滑动切换插件 - 时间轴动态滑动

6 jScrollPane实现隐藏滚动条效果

(Demo演示 | Download下载)

这个滑动插件也是广义的滑动效果插件,它的作用是用于隐藏页面的滚动条。只有当用户鼠标移动到内容上方时才会出来滚动条。

jQuery图片滑动切换插件 - 隐藏滚动条
jQuery图片滑动切换插件 - 隐藏滚动条

7 Timelinr

(Demo演示 | Download下载)

跟第5个插件很类型,它是一个基于时间线的jQuery滑动插件。你可以自定义它的滑动速度,透明度等效果。同时运行横向和纵向两种滑动切换模式。

jQuery图片滑动切换插件 - 时间轴动态滑动
jQuery图片滑动切换插件 - 时间轴动态滑动

8 SmartGallery

(Demo演示 | Download下载)

SmartGallery是一个非常出色的照片滑动切换展示的jQuery插件。它支持12种不同的图片过渡切换效果。并有小缩略图。

jQuery图片滑动切换插件 - 照片浏览效果
jQuery图片滑动切换插件 - 照片浏览效果

9 Xml Driven Vertical News Scroller Script Vscroller

(Demo演示 | Download下载)

读取Xml的新闻纵向滚动效果。Vscroller可以用于新闻滚动显示的效果。它通过读取一个XML文件,并通过其漂亮的效果表现出来。

jQuery图片滑动切换插件 - 新闻滑动滚动效果
jQuery图片滑动切换插件 - 新闻滑动滚动效果

10 PushUp

(Demo演示 | Download下载)

这个插件的功能也已经超越图片滑动切换的范畴。它的作用是当网页需要弹出一个新层来展示更多内容时,它可以固定显示在网页的左边或右边,以展示更多的内容。

jQuery图片滑动切换插件 - 弹出固定层
jQuery图片滑动切换插件 - 弹出固定层

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
分享22款响应式的 jQuery 图片滑块插件
  响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助你在 Web 项目中实现有吸引力的图片滑块效果。
1134 0
关于wordpress主题、插件上传和下载问题及其上传图片权限问题解决方案
主题官方下载地址:https://wordpress.org/themes/ 插件官方下载地址: https://wordpress.org/plugins/ 主题的上传下载,无疑是需要ftp服务器的。
2032 0
JQuery文件上传及以Base64字符串形式呈现图片
一:上传之 首先,你必然得有一个 file input,如下:         其次,让我们 upload,如下: $.ajaxFileUpload({     url: '@ViewBag.
576 0
jquery实现 图片延迟加载
图片延迟加载的大致的原理是,对于图片标签不是把图片的路径指定到src属性上,src属性指定一个非常小的空白图片,真正的图片地址设置到一个自定义的属性上,比如file,这样img标签就是这样:或者背景直接把一张小的空白图作为背景色。
818 0
Elasticsearch插件一——-head插件安装详解(Elasticsearch教程08)|MVP讲堂
横扫你学习 Elasticsearch 的诸多疑惑,让你少走半年弯路!
1913 0
常用 Maven 插件大全(速度收藏)
常用 Maven 插件大全(速度收藏)
89 0
android git上开源的项目收藏
<p style="font-size:14px; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; outline:0px; vertical-align:baseline; orphans:4; color:rgb(68,68,68); font-family:'Tim
1968 0
+关注
楚广明
10年导入咨询顾问经验,敏捷中国 第一届中国高峰会讲员,行业实施:中国移动、中华联合保险、中国民航信息 ANZ 澳新银行、戴姆勒奔驰汽车、广州证券、浦发银行、爱德万测试、蔚来汽车、清华大学、努比亚、顺丰速运、迅雷、时趣互动......等企业 Atlassian 敏捷项目
508
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载