闲来无事，练习js，参照网上的一些源码写了一个图片切换程序，刚来博客园，不懂怎么发布js程序，懂的朋友可以留言告之。以下以图片解释。
大致功能如下：
1.图片切换效果有以下几种：随机切换 4格纵向百叶窗 16格横向百叶窗 由里至外逐渐放大 中间向左右两边逐渐放大 中间向上下两边逐渐放大 由上至下落幕 由左至右 由左上至右下 由右下至左上 8格纵向百叶窗 8格纵向百叶窗2 8格万花筒 24格万花筒 4格滑行左上至右下 4格滑行左上至右下 4格滑行落幕 4格滑行延伸。
图示为八格万花筒效果：
2.支持的导航方式有以下几种：
2.1：数字导航
2.2：图片内部导航：
2.3：图片底部导航
2.4： 左部图片导航
2.5： 右部图片导航
2.6： 无导航
使用方法：
使用方法力求简单，只需要在head标签中添加
window.onload=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属性来将图片分为几部分：如
<div style="width: 235px; height: 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); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; clip: rect(0px 235px 177px 0px); background-position: 0px -177px; background-repeat: initial initial; "></div>
主要的属性有： clip background-position width height background-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);
作者: 小诺N 发表于 2011-08-15 12:12 原文链接
最新新闻：
· 李开复：谷歌收购摩托意在专利(2011-08-15 21:52)
· 调查显示79.2%网友看好谷歌收购摩托罗拉移动(2011-08-15 21:49)
· 谷歌高管解读收购事宜：摩托罗拉将独立运营(2011-08-15 21:43)
· 杨兴平：谷歌收购摩托罗拉会走向封闭(2011-08-15 21:13)
· 再见，摩托罗拉(2011-08-15 21:12)
编辑推荐：谷歌125亿美元收购摩托罗拉移动