自制jQuery图片切换插件ImgSlider v1.0

之前写过一个让图片幻灯显示的效果，费了很大的劲，考虑到有很多地方有这样的需求，不如把它封装起来，再加之是自己开发的，最符合自己的需求，磕磕碰碰几天之后，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，参数说明：

代码

1 wrapName: ' imgb ' , // 窗口内唯一包裹所有幻灯图片的div的类名
2   wrapWidth: 351 , // 容器宽度
3   wrapHeight: 396 , // 容器高度
4 speed: 1000 , // 切换速度
5 interval: 5000 , // 切换间隔
6 arrPosition: - 403 , // 预览图箭头初始位置
7 hidePreview: false , // 隐藏预览图，隐藏后会显示数字导航
8 hideCaptial: false // 隐藏标题/介绍

10，预览：

 11，调用：

11.1 HTML:

代码

     第一个例子，把图片容器类名设为imgb，则无需传递此参数

< div id ="fla_focus" >
< div class ="imgb" >< img target ="_blank" onclick ="location.href='#'" cont ="这是一个很好玩很火爆的活动哦，大家快来参加吧！！！参与还有礼品拿！" title ="第一个推荐活动" alt ="" src ="img/1.jpg" />< img target ="_blank" onclick ="location.href='#'" cont ="这第二个很好玩很火爆的活动哦，大家快来参加吧！！！参与还有礼品拿！" title ="第二个推荐活动" alt ="" src ="img/2.jpg" />< img target ="_blank" onclick ="location.href='#'" cont ="这第三个很好玩很火爆的活动哦，大家快来参加吧！！！参与还有礼品拿！" title ="第三个推荐活动" alt ="" src ="img/3.jpg" />< img target ="_blank" onclick ="location.href='#'" cont ="这第四个很好玩很火爆的活动哦，大家快来参加吧！！！参与还有礼品拿！" title ="第四个推荐活动" alt ="" src ="img/4.jpg" >< img target ="_blank" onclick ="location.href='#'" cont ="这第五个很好玩很火爆的活动哦，大家快来参加吧！！！参与还有礼品拿！" title ="第五个推荐活动" alt ="" src ="img/5.jpg" />
</ div >
</ div >
第二个例子，自定义类别，需在参数中传入
< div id ="slide2" >
< div class ="myname" >< img title ="aaa" src ="images/01.jpg" alt ="" />< img title ="aaa" src ="images/02.jpg" alt ="" />< img title ="aaa" src ="images/03.jpg" alt ="" />< img title ="aaa" src ="images/04.jpg" alt ="" />< img title ="aaa" src ="images/05.jpg" alt ="" /></ div >
</ div >
</ div >

11.2 调用示例：

代码

1 $( function (){
2 $( " #fla_focus " ).ImgSlider(); // 使用默认值(图片容器类名应为imgb,否则必须传入wrapName属性)
3 $( " #slide2 " ).ImgSlider({
4 hidePreview: true , // 隐藏预览
5 hideCaptial: true , // 隐藏标题
6 wrapWidth: 696 , // 自定义宽度
7 wrapHeight: 241 , // 自定义高度
8 interval: 3000 , // 自定义切换间隔
9 wrapName: " myname " // 自定义图片容器的class名
10 });
11 });

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下测试了下，修改了一点小的瑕疵，没做大改动，也没加效果