看到jQuery实例：图片展示效果后，我也想拿来试试，但我不太喜欢用框架，所以自己做了个。
其中的难点在于怎么设计各个滑动对象进行想要的滑动。
一开始我想的是利用滑动对象的宽度的变化来实现滑动，
但实行起来发现这个只能在理想状态下实现，一般实现起来很困难。
所以还是参照了实例中的方法，利用left的变化来实现滑动。

?

?

?

?

效果预览

下载完整测试代码

?

程序原理：

设计之初，先不要考虑文本显示那部分，把重心放到滑动效果的实现上，
减少设计负担，这是小小的技巧吧。

总体的思路是通过移动各个滑动对象到指定的位置来实现不同的效果。
效果有两种，分部是：鼠标移出容器时的默认效果和鼠标移到某个滑动对象时的展示效果。
根据效果可以看出，滑动对象有三种宽度一个是默认宽度，最大宽度和最小宽度。
这些宽度都可以在初始化时设置：
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->this._list?=?oContainer.getElementsByTagName(sTag);
len?=?this._list.length;
this._count?=?len;
this._width?=?parseInt(iWidth?/?len);
this._width_max?=?parseInt(iMaxWidth);
this._width_min?=?parseInt((iWidth?-?this._width_max)?/?(len?-?1));

?

我给每个滑动对象添加了一个_target属性来放一个目标值，用来告诉它要滑到哪里。

移动之前先执行Set()程序，给每个对象设置目标值，要分两种情况：

1.鼠标移出容器：这时只要设置滑动对象的目标值为默认宽度*索引值就行；

2.鼠标移到某个滑动对象上：把当前对象和之前的滑动对象的目标值设为最小宽度*索引值，之后的对象设为最小宽度*(索引值-1)加上最大宽度（因为这样会算多一个最小宽度所以要减1个），这样设置就能得到要实现的效果：