推荐几款jquery图片切换插件

简介: 一、前言   毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式、各种姿势都涌现出来了。这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利用静态网页的形式进行展示。

一、前言

  毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式、各种姿势都涌现出来了。这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利用静态网页的形式进行展示。

二、用到的四个免费的jquery插件

  注:都是网上免费的,自己测试过了,挺好用的,顺便改了改。

1.3D Change

  下载地址:https://github.com/hjzgg/picture_show/tree/master/3D_change

  效果展示

  

2.Sample Change

  下载地址:https://github.com/hjzgg/picture_show/tree/master/sample_change

  效果展示

3.Slide Change

  下载地址: https://github.com/hjzgg/picture_show/tree/master/slide_change

  效果展示

4.Transition Change

  下载地址:https://github.com/hjzgg/picture_show/tree/master/transitions_change

  效果展示

  

  注:该插件提供了好多图片切换的方式,打开链接地址,里面有6个html,代表6中不同的图片切换方式。你可以下载下来,在自己的浏览器中观看一下效果。

三、图片浏览

  通过上面的四个免费的jquery图片切换插件,自己写了一个简单图片浏览工具。

  项目地址: https://github.com/hjzgg/picture_show

  效果展示

四、毕业照片展示

  **图片资源删掉**

  对上面的图片浏览工具进行稍微的改造(例如为浏览时增加一点儿情调,增加背景音乐),然后将照片换成我的毕业照片,工作算是完成了。最后通过GitHub Pages生成一个静态网站,然后就可以邀请好友访问了(需要提醒的是使用谷歌浏览器访问)。

  欢迎访问:https://hjzgg.github.io/graduation_picture_show/ (谷歌浏览器效果最好哦!)

  效果展示

 

  项目地址:https://github.com/hjzgg/graduation_picture_show/tree/gh-pages

  

目录
相关文章
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
218 0
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
514 166
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
300 1
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
540 16
|
JavaScript
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
269 0
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
307 2
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?