位置：首页>> 网络编程>> JavaScript>> javascript新闻图片轮换类

javascript新闻图片轮换类

作者：Rimifon　来源：風雲工作室　发布时间：2009-01-09 12:57:00　

标签：轮换,新闻,类,javascript

<!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", "http://www.aspxhome.com", "新闻标题");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>

投稿

javascript新闻图片轮换类

猜你喜欢