js图片轮换效果 js焦点图代码

 

  图片轮换效果，在网上有很多了，很多都是flash的。flash的效果漂亮，但是size也比较大。找来找去也没找到简单的。。。后来看到了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