【原创】新闻图片轮换类

<!doctype><html>
<head><title>新闻图片轮换类</title>
<script type="text/javascript">
var fs = new FadeSlideClass();
fs.Width = 430;
fs.Height = 250;
fs.AddImage("http://www.fengyun.org/Test/Image/001.jpg", "#", "新闻标题");
fs.AddImage("http://www.fengyun.org/Test/Image/002.jpg", "#", "新闻标题");
fs.AddImage("http://www.fengyun.org/Test/Image/003.jpg", "//g.cn", "去Google");
fs.AddImage("http://www.fengyun.org/Test/Image/004.jpg", "#", "新闻标题");
fs.AddImage("http://www.fengyun.org/Test/Image/005.jpg", "#", "新闻标题");
fs.RenderTo("divStage");

/* 以下代码构造轮换类 */
function FadeSlideClass()
{
	this.Width = 450;
	this.Height = 300;
	this.BorderColor = "#ddd";
	this.CurrentColor = "green";
	this.Delay = 5000;
	var divContainer = document.createElement("div");
	var divImage = document.createElement("div");
	var ulList = document.createElement("ul");
	var me = this;
	var arrImg = new Array;
	this.Tag = divContainer;
	this.AddImage = function(strImageUrl, strLink, strTitle)
	{
		arrImg.push(arguments);
	}
	this.RenderTo = function(container)
	{
		if(typeof container == "string") container = document.getElementById(container) || container;
		if(typeof container == "string") return setTimeout(function(){ me.RenderTo(container); }, 100);
		if(!arrImg.length) throw new Error("尚未添加图片。");
		var cssFloat = typeof ulList.style.cssFloat == "string" ? "cssFloat" : "styleFloat";
		divContainer.style.width = this.Width + "px";
		divContainer.style.height = this.Height + "px";
		divImage.style.width = Math.round(this.Width * (arrImg.length - 1) / arrImg.length) + "px";
		divImage.style.height = this.Height + "px";
		divImage.style[cssFloat] = "left";
		ulList.style.width = (this.Width - parseInt(divImage.style.width)) + "px";
		ulList.style.height = this.Height + "px";
		ulList.style.margin = "0px";
		ulList.style.padding = "0px";
		ulList.style[cssFloat] = "left";
		divContainer.style.overflow = "hidden";
		divImage.style.overflow = "hidden";
		ulList.onmouseover = function(){ clearTimeout(me.Handler) };
		ulList.onmouseout = function(){ AutoPlay(); };
		InitImage(2);
		InitList(arrImg.length);
		container.appendChild(divContainer);
		divContainer.appendChild(divImage);
		divContainer.appendChild(ulList);
		LiMouseOver.call(ulList.firstChild);
		AutoPlay();
		this.AddImage = function(){ throw new Error("该方法已过时。"); }
	}
	this.Display = function(imgThumb)
	{
		var img = divImage.lastChild.lastChild;
		var opa = new OpacityClass(img);
		opa.Set(20);
		img.src = imgThumb.src;
		img.parentNode.href = imgThumb.parentNode.href;
		img.parentNode.title = imgThumb.parentNode.title;
		clearInterval(ulList.Handler);
		ulList.Handler = setInterval(function(){
			if(opa.Add(5) >= 100)
			{
				divImage.firstChild.lastChild.src = img.src;
				clearInterval(ulList.Handler);
			}
		}, 25);
	}
	function LiMouseOver()
	{
		if(this == ulList.oldLi) return;
		if(ulList.oldLi) ulList.oldLi.style.borderColor = me.BorderColor;
		this.style.borderColor = me.CurrentColor;
		ulList.oldLi = this;
		me.Display(this.firstChild.firstChild);
	}
	function InitImage(count)
	{
		if(--count) arguments.callee(count);
		var a = document.createElement("a");
		a.target = "_blank";
		divImage.appendChild(a).style.position = "absolute";
		var img = new Image;
		img.width = parseInt(divImage.style.width);
		img.height = me.Height;
		img.border = 0;
		if(!a.appendChild(img).filters) img.style.opacity = 1;
		else img.style.filter = "alpha(opacity=100)";
	}
	function InitList(count)
	{
		if(--count) InitList(count);
		var isIeNoDtd = document.compatMode != "CSS1Compat" && /msie/i.test(navigator.userAgent);
		var data = arrImg[count];
		var thumbWidth = parseInt(ulList.style.width);
		var thumbHeight = Math.round(me.Height / arrImg.length);
		var li = document.createElement("li");
		li.style.overflow = "hidden";
		li.style.width = (isIeNoDtd ? thumbWidth : thumbWidth - 4) + "px";
		li.style.height = (isIeNoDtd ? thumbHeight : thumbHeight - 4) + "px";
		li.style.borderWidth = "2px";
		li.style.borderStyle = "solid";
		li.style.borderColor = me.BorderColor;
		var a = document.createElement("a");
		a.target = "_target";
		a.href = data[1];
		a.title = data[2];
		var img = new Image;
		img.border = 0;
		img.width = thumbWidth;
		img.height = thumbHeight;
		img.src = data[0];
		img.style.verticalAlign = "top";
		img.style.margin = "-2px";
		a.appendChild(img);
		li.appendChild(a);
		li.style.listStyle = "none";
		li.onmouseover = LiMouseOver;
		ulList.appendChild(li);
	}
	function AutoPlay()
	{
		me.Handler = setTimeout(function()
		{
			LiMouseOver.call(ulList.oldLi.nextSibling || ulList.firstChild);
			AutoPlay();
		}, me.Delay);
	}
	function OpacityClass(tag)
	{
		var isFilter = !!tag.filters;
		var obj = isFilter ? tag.filters.alpha : tag.style;
		this.Set = function(value)
		{
			obj.opacity = isFilter ? value : value / 100;
			return this;
		}
		this.Add = function(value)
		{
			var opa = isFilter ? obj.opacity : obj.opacity * 100;
			opa += value;
			if(opa > 100) opa = 100;
			obj.opacity = isFilter ? opa : opa / 100;
			return this;
		}
		this.valueOf = function()
		{
			return isFilter ? obj.opacity : obj.opacity * 100;
		}
	}
}
</script>
</head><body><div id="divStage"></div></body></html>

[您可以先修改代码再运行]