7个简单实用的jQuery图片播放器

本文介绍了几款基于jQuery的图片播放插件,包括Diapo、jCoverflip、SlideShow、NivoSlider、FlexSlider、水平滚动插件及苹果样式播放器,提供了详细的功能展示与演示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

网页特效中,我们经常会遇到需要循环播放图片的情况,比如首页上的广告轮播或者相册浏览等。如何简单的实现一款漂亮平滑的图片播放插件呢?下面就介绍几款非常不错的jQuery图片播放插件,希望对大家有所帮助。

1、jQuery图片播放插件Diapo

这是一款基于jQuery的图片播放插件,提供缩略图效果和多种图片切换动画效果,并且支持任何HTML元素的播放切换,一起来看看效果。

2、jQuery滑杆式图片播放器jCoverflip

jCoverflip又是另一种形式的jQuery图片播放器,该图片播放器可以通过拖动下面的拖动条来切换滑动图片,非常简单实用,一起来看看演示效果。

3、jQuery带缩略图的图片播放插件SlideShow

这是一款基于jQuery的图片播放插件,该图片播放插件带有缩略图,用户可以点击缩略图来切换图片,使用非常方便,下面一起来看看这个jQuery带缩略图的图片播放插件。

4、jQuery图片播放插件Nivo Slider

Nivo Slider是一款基于jQuery的图片播放插件,Nivo Slider不仅轻巧,配置简单,而且支持多种图片的动画切换效果,支持多主题。jQuery插件版免费,Wordpress插件需要收费,下面一起来看看这个图片播放插件的演示效果,推荐大家可以关注一下。

5、jQuery图片播放插件FlexSlider

FlexSlider是一款基于jQuery的图片播放插件,FlexSlider配置比较灵活,FlexSlider能让你轻松的创建内容滚动的效果,具有非常高的可定制性。FlexSlider是将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制。

6、jQuery图片水平滚动插件

这是一款基于jQuery的图片水平滚动插件,这个插件在滚动图片的时候十分流畅,同时支持自动播放,你也可以利用鼠标滚轮来使图片左右滚动。

7、jQuery仿苹果图片播放器

这是一款基于jQuery的仿苹果样式的图片播放器,这个图片播放器配置简单,外观简洁但不是美观,和苹果的特点非常相符。这个图片播放器非常适合放在你的首页上作为产品图片轮播组件。

以上就是几款不错的jQuery图片播放插件,希望大家会喜欢,另外,转载请注明出处:html5_dev的专栏


jquery 图片播放器插件 作者:笑的自然 我的博客:http://blog.youkuaiyun.com/xxd851116 我的邮箱: xingxiudong@gmail.com 下载: 项目地址:http://code.google.com/p/imgplayer/ 历史下载: http://code.google.com/p/imgplayer/downloads/list jquery.fn.imgplayer.js最新下载地址:http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.js jquery.fn.imgplayer.min.js最新下载地址:http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.min.js 说明: 1. 项目编码为GBK 2. 目前播放模式支持 1:溶解,2:挂历模式,3:滑动(从左到右),4:滑动(从上到下),5:滑动(从下到上),6:滑动(从右到左),善不支持随机模式 3. 在IE6,IE8,FF下测试通过 4. 支持任意数量图片,使用简单 5. 考虑到图片占用空间较多,示例中图片来自网络,离线状态下需要自定义图片 由于采用纯JavaScript实现,动画效果比较简单,目前善不支持随机播放模式,希望广大编程爱好者提出建议和不足。 参数: imgCSS : 用户自定义图片样式 transition : 播放模式选项 1:溶解,2:挂历模式,3:滑动(从左到右),4:滑动(从上到下),5:滑动(从下到上),6:滑动(从右到左),23:随机 width : 播放器div容器的宽度 height : 播放器div容器的高度 time : 图片播放间隙时间,单位:毫秒 duration : 图片播放时间,单位:毫秒 onStart : 开始播放时执行的函数 onStop : 停止播放时执行的函数 onShow : 每页图片显示时执行的函数 onHide : 每页图片隐藏时执行的函数 使用示例: 1. 容器代码 <div id="imgContainer" style="margin-left:auto;margin-right:auto;margin-top:5px;display:none;"> <a href="" target="_blank" title=""><img src="" title="" /></a> ...... </div> 2. 导入jquery包(http://code.jquery.com/jquery-1.4.2.min.js) <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 3. 导入imgplayer插件(http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.min.js) <script type="text/javascript" src="jquery.fn.imgplayer.min.js"></script> 4. 绑定播放函数(参数说明详见上述) var player = $("#imgContainer").playImgs({ imgCSS : {'width' : '800px', 'height' : '600px'}, width : '800px', height: '600px', time : '5000', transition : 1, duration : 2000 }).start(); 更新日志: v1.2(2010-02-24): 1.修改了标题栏右侧冲出容器的bug 2.添加了duration参数,可自定义图片动画效果时间 v1.1(2009-09-23): 1.修改了鼠标停留播放器和序号标签上图片继续播放的问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值