之前写过一个让图片幻灯显示的效果,费了很大的劲,考虑到有很多地方有这样的需求,不如把它封装起来,再加之是自己开发的,最符合自己的需求,磕磕碰碰几天之后,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,使用这个元素调用方法。
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(由于写这篇文章的过程中,把文件传了上去,故不再把代码贴出来,想体验的,就下载试试吧)
13,
附注:由于打包匆忙,CSS有大量没删掉的地方,但已经注释了,为了保持代码简洁,请自行删掉,其实起作用的就那7行。