javascript图片切换

闲来无事,练习js,参照网上的一些源码写了一个图片切换程序,刚来博客园,不懂怎么发布js程序,懂的朋友可以留言告之。以下以图片解释。

大致功能如下:

1.图片切换效果有以下几种:随机切换4格纵向百叶窗16格横向百叶窗由里至外逐渐放大中间向左右两边逐渐放大中间向上下两边逐渐放大由上至下落幕由左至右由左上至右下由右下至左上8格纵向百叶窗8格纵向百叶窗28格万花筒24格万花筒4格滑行左上至右下4格滑行左上至右下4格滑行落幕4格滑行延伸。

图示为八格万花筒效果:

2.支持的导航方式有以下几种:

2.1:数字导航

2.2:图片内部导航:

2.3:图片底部导航

2.4: 左部图片导航

2.5: 右部图片导航

2.6: 无导航

使用方法:

使用方法力求简单,只需要在head标签中添加

window.οnlοad=function(){

new imgswitch("imgcontainer",{type:15,width:874,height:211,pause:3000,speed:"fast",auto:true,navigate:"picture",pictureposition:"right"})

}

参数说明:

type:图片切换的方式,目前有0-17,

0: 随机切换

1: 4格纵向百叶窗

2: 16格横向百叶窗

3: 由里至外逐渐放大

4: 中间向左右两边逐渐放大

5: 中间向上下两边逐渐放大

6: 由上至下落幕

7: 由左至右

8: 由左上至右下

9: 由右下至左上

10: 8格纵向百叶窗

11: 8格纵向百叶窗2

12: 8格万花筒

13: 24格万花筒

14: 4格滑行左上至右下

15: 4格滑行左上至右下

16: 4格滑行落幕

17: 4格滑行延伸。

width:图片的宽度(这个有点小bug,回头改正,修改长高时style.css里面imgcontainer也请修改一下)

height:图片的高度

pause:图片停留的时间

speed:图片切换的时间,有三种方式,fast,normal,slow,也可以自定义时间,如:"200",单位是毫秒。默认为normal

auto:true或者false,是否自动播放

navigate:导航方式,目前有三种,"no"代表无导航,"numberic"代表数字导航,"picture"代表图片导航

navigateplace:导航所在地方。"inner"代表在内部,"outer"代表在外部

pictureposition:在navigate为picture的情况下,有三种方式:"bottom"导航图片在底部 "left"导航图片在左部 "right"导航图片在右部

原理说明

主要是利用div的position的left,top属性来将图片分为几部分:如

主要的属性有: clipbackground-positionwidthheightbackground-image

大致顺序为:如果图片要弄成八部,则将长高除以八得到一个div的长高,如width: 235px; height: 177px;然后用bgimage和b-p来确定背景图片:background-position: 0px -177px;

background-image: url(file:///c:/documents%20and%20settings/administrator/%e6%a1%8c%e9%9d%a2/%e4%bb%a3%e7%a0%81/imgswitch/images/3.jpg);

最后用js来控制clip属性,如 clip: rect(0px 235px 177px 0px);

目前测过的浏览器支持:

ie(6,7,8,9)firfox chrome safari

测试事例完整源代码

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/