日期:2014-05-16 浏览次数:20495 次
?
?cloudgamer 写的例子还不错,这里稍加改造,仿了一下淘宝的效果。主要觉得js写的用起来比较简单,而且是跨浏览器的。传上来分享。 ? ? 效果图: ? 使用方法 ? 首先要引入trans.js ? ? 然后只关注下面这段代码就可以了,如果多一个图片就加一个td。 ? 如果你要控制颜色,就修改样式部分。 ? 还有一段页面加载的时候执行的js,主要是根据表格的td数动态创建数字按钮,并设置数字按钮的相关事件。 ? ? ?其中可以设置许多初始化参数,下面介绍几个,其余的有兴趣可以看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 ?<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>
<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>