?cloudgamer 写的例子还不错，这里稍加改造，仿了一下淘宝的效果。主要觉得js写的用起来比较简单，而且是跨浏览器的。传上来分享。

?

?

效果图：

?

使用方法

?

首先要引入trans.js

?

?

然后只关注下面这段代码就可以了，如果多一个图片就加一个td。

<div class="container" id="idContainer">
	<table id="idSlider" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td>
				<a href="#">
			    	<img src="images/1.jpg"/ alt="" />
			    </a>
			</td>
			<td>
				<a href="#">
			       <img src="images/2.jpg"/ alt="" />
			    </a>
			</td>
			<td>
				<a href="#">
			       <img src="images/3.jpg"/ alt="" />
			    </a>
			</td>
			<td>
				<a href="#">
			       <img src="images/4.jpg"/ alt="" />
			    </a>
			</td>
			<td>
				<a href="#">
			       <img src="images/5.jpg"/ alt="" />
			    </a>
			</td>
			<td>
				<a href="#">
			       <img src="images/6.jpg"/ alt="" />
			    </a>
			</td>
		</tr>
	</table>
	<ul id="idNum" class="num"></ul>
</div>

?

如果你要控制颜色，就修改样式部分。

?

还有一段页面加载的时候执行的js，主要是根据表格的td数动态创建数字按钮，并设置数字按钮的相关事件。

?

<script type="text/javascript" src="trans.js"></script>
<script type="text/javascript">
	function loadPage(){
		var nums = [], timer, n = $$("idSlider").getElementsByTagName("td").length,st=null;
		for (var i = 1; i <= n; i++) {
			var item_num = document.createElement("li");
		    item_num.innerHTML = i;
		    item_num.onmouseover = function(){
		    	if(this.className != "on"){
		    		this.className = "over";
		    	}
		    };
		    item_num.onmouseout = function(){
		    	if(this.className != "on"){
		    		this.className = "";
		    	}
		    };
		    item_num.onclick = function(){
		    	if(st != null){
		    		st.Run(parseInt(this.innerHTML)-1);
		    		this.className = "on";
		    	}	
		    };
		    $$("idNum").appendChild(item_num);
		    nums[i] = item_num;
		};
		st = new SlideTrans("idContainer", "idSlider",n,{
		    onStart:function () {
		    	forEach(nums,function(o,i){
		    		if(o){
		    			o.className = (this.Index == (i-1)) ? "on" : "";
		    		}
		    	},this);
		    },
		    Vertical:false,
		    Pause:2500,
		    Duration:100
		});
		st.Run();
	}
</script>

?

?其中可以设置许多初始化参数，下面介绍几个，其余的有兴趣可以看js文件或者参见http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html 。

?

Vertical设置是垂直滑动还是水平滑动。但是垂直滑动好像有点问题，我用的是水平滑动。如果垂直滑动的话可以将表格部分改为ul，然后将里面的li的样式list-style-type设置为none，然后向左浮动。

?

Pause是设置停顿时间(Auto为true时有效)

?

Duration 是设置滑动持续时间。

?

?

JS文件trans.js

?