闲来无事，练习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标签中添加

　　参数说明：

     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属性来将图片分为几部分：如

　　主要的属性有： 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);

目前测过的浏览器支持：

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