自制jQuery图片切换插件ImgSlider v1.0
2010-06-25 22:09
429 查看
之前写过一个让图片幻灯显示的效果,费了很大的劲,考虑到有很多地方有这样的需求,不如把它封装起来,再加之是自己开发的,最符合自己的需求,磕磕碰碰几天之后,ImgSlider插件诞生了,说明如下:
1,没有做复杂的效果,所有的效果都是从右往左移动。
1.1多种动画效果已实现,发布在google code,
2,自带预览图功能,半透明
3,带额外的当前图片描述功能,与图片展示时一同出现,即同时有图片的title,还有图片的简单介绍,半透明动态浮出。见例子。
4,关闭预览图,则会出现数字导航
5,这是花时间改造最多的,就是同一个页面可以有多个元素同时使用此插件,并且各自切换,不相干扰
5.1代价就是,所有选择器都不是ID,而是class名,你确定一个页面只放一个的话,可以把我的插件弄回去自己稍微改一下
6,由于改造麻烦,故图片做的不是链接,点击图片要跳转的话,是写在图片的onclick事件里面
6.1因为每张图片移动的位置都是精确计算的,所以五张图必须连续,没有间隔,很多IDE把代码缩进处理成了浏览器能识别的空白,这样会完全破坏效果,因此应像本例中那样,几张图片的代码连续拼出,不带空格,此外,建立真正发布的时候,这段代码由后台拼出,这样完全避免产生空白的可能
7,需要自定义的地方:
7.1 一个DIV包含需要的图片
7.2一个DIV包含上面那个DIV,使用这个元素调用方法。
7.3图片除title外的详细说明,需要自定义一个名为cont的属性,如<img src=".." alt="" title="title" cont="description" />
8,预览图及数字导航的样式没写在插件里,因为根据情况不同,它们会呈现不同的样式,千差万别,请自行根据实际情况写这两个导航控件的CSS。
9,参数说明:
代码
11.3 CSS(相当于,CSS里面规定的类名,是在插件里面定好的,你不能自定义,你只要拷回代码)
11.4 JS(由于写这篇文章的过程中,把文件传了上去,故不再把代码贴出来,想体验的,就下载试试吧)
12,下载示例 另,以后的更新发布在google code上:https://imagesliderbywalker.googlecode.com/svn/trunk/
或:http://code.google.com/p/imagesliderbywalker/downloads/list
13,
附注:由于打包匆忙,CSS有大量没删掉的地方,但已经注释了,为了保持代码简洁,请自行删掉,其实起作用的就那7行。
要发布在网站的话,请把插件自行压缩一下
有其他问题请回复或邮件我
14,v1.1.1更新在google code,主要在真正的ie6下测试了下,修改了一点小的瑕疵,没做大改动,也没加效果
1,没有做复杂的效果,所有的效果都是从右往左移动。
1.1多种动画效果已实现,发布在google code,
2,自带预览图功能,半透明
3,带额外的当前图片描述功能,与图片展示时一同出现,即同时有图片的title,还有图片的简单介绍,半透明动态浮出。见例子。
4,关闭预览图,则会出现数字导航
5,这是花时间改造最多的,就是同一个页面可以有多个元素同时使用此插件,并且各自切换,不相干扰
5.1代价就是,所有选择器都不是ID,而是class名,你确定一个页面只放一个的话,可以把我的插件弄回去自己稍微改一下
6,由于改造麻烦,故图片做的不是链接,点击图片要跳转的话,是写在图片的onclick事件里面
6.1因为每张图片移动的位置都是精确计算的,所以五张图必须连续,没有间隔,很多IDE把代码缩进处理成了浏览器能识别的空白,这样会完全破坏效果,因此应像本例中那样,几张图片的代码连续拼出,不带空格,此外,建立真正发布的时候,这段代码由后台拼出,这样完全避免产生空白的可能
7,需要自定义的地方:
7.1 一个DIV包含需要的图片
7.2一个DIV包含上面那个DIV,使用这个元素调用方法。
7.3图片除title外的详细说明,需要自定义一个名为cont的属性,如<img src=".." alt="" title="title" cont="description" />
8,预览图及数字导航的样式没写在插件里,因为根据情况不同,它们会呈现不同的样式,千差万别,请自行根据实际情况写这两个导航控件的CSS。
9,参数说明:
代码
$(function(){ $("#fla_focus").ImgSlider();//使用默认值(图片容器类名应为imgb,否则必须传入wrapName属性) $("#slide2").ImgSlider({ hidePreview:true,//隐藏预览 hideCaptial:true,//隐藏标题 wrapWidth:696,//自定义宽度 wrapHeight:241,//自定义高度 interval:3000,//自定义切换间隔 wrapName:"myname"//自定义图片容器的class名 }); });
11.3 CSS(相当于,CSS里面规定的类名,是在插件里面定好的,你不能自定义,你只要拷回代码)
11.4 JS(由于写这篇文章的过程中,把文件传了上去,故不再把代码贴出来,想体验的,就下载试试吧)
12,下载示例 另,以后的更新发布在google code上:https://imagesliderbywalker.googlecode.com/svn/trunk/
或:http://code.google.com/p/imagesliderbywalker/downloads/list
13,
附注:由于打包匆忙,CSS有大量没删掉的地方,但已经注释了,为了保持代码简洁,请自行删掉,其实起作用的就那7行。
要发布在网站的话,请把插件自行压缩一下
有其他问题请回复或邮件我
14,v1.1.1更新在google code,主要在真正的ie6下测试了下,修改了一点小的瑕疵,没做大改动,也没加效果
相关文章推荐
- 【转载】【精心推荐】10款非常时尚的 jQuery 图片切换插件
- jQuery 一个图片切换的插件
- jquery图片不间断滚动切换插件 jCarousel Lite
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- jQuery-插件-图片切换(第一次自已偿试写插件)
- jquery 插件bgStretcher 切换背景图片
- jQuery插件实例三:图片滚动[切换]效果一
- 一款基于jQuery的图片下滑切换焦点图插件
- jquery图片列表左右切换插件
- 基于jQuery图片切换实现预加载插件,左右带控制
- jQuery 一个图片切换的插件
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果
- jQuery插件实现带圆点的焦点图片轮播切换
- 基于jquery插件制作左右按钮与标题文字图片切换效果
- 前些天写的一jquery首页图片切换插件(额,不知道这种效果叫什么名字)
- jQuery实现的图片分组切换焦点图插件
- jquery图片播放切换插件
- 【精心推荐】10款非常时尚的 jQuery 图片切换插件
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果
- jQuery动画、图片切换 KinSlideshow jQuery 多样式图片幻灯片插件