嘛,公司项目里要做的,做完后顺便一发…… XML像是这样 <?xml version="1.0" encoding="utf-8"?> <data time="5"> <pic src="pic_1.jpg" mce_src="pic_1.jpg" tag="jpeg" title="这是标题" content="这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了" link="http://www.baidu.com/" /> <pic src="pic_1.jpg" mce_src="pic_1.jpg" tag="jpeg" title="这是标题" content="这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了" link="http://www.baidu.com/" /> <pic src="pic_1.jpg" mce_src="pic_1.jpg" tag="jpeg" title="这是标题" content="这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了" link="http://www.baidu.com/" /> <pic src="pic_1.jpg" mce_src="pic_1.jpg" tag="jpeg" title="这是标题" content="这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了" link="http://www.baidu.com/" /> <pic src="pic_1.jpg" mce_src="pic_1.jpg" tag="jpeg" title="这是标题" content="这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了这就是文字了" link="http://www.baidu.com/" /> </data> HTML和CSS是这样 <mce:style type="text/css"><!-- #pic_shower_img li{ padding:0; margin:0; height:250px; *margin-bottom:-3px;} #pic_shower_img h2{ color:#FFF; font-weight:bold; font-size:20px; margin-top:10px; text-align:center;} #pic_shower_img p{ color:#FF0; text-indent:2em; margin-top:10px; padding:10px; line-height:1.8em;} #pic_shower_img .opacity{ position:absolute; right:0; top:0; width:250px; height:250px; background:#000; opacity:0.5; filter:alpha(opacity=50); _right:20px;} #pic_shower_img .content{ position:absolute; right:0; top:0; width:250px; height:250px; _right:20px;} #pic_shower_img .button{ text-align:center; padding:5px; position:absolute; bottom:10px; width:100%;} #pic_shower_bar{ padding:5px; height:20px; text-align:center; overflow:hidden; zoom:1; margin:0 auto;} #pic_shower_bar .hover{ background:#CCC; border:#CCC 1px solid;} #pic_shower_bar input{ margin-right:5px; cursor:pointer; background:#666; border:#CCC 1px solid; width:40px; height:18px;} --></mce:style><style type="text/css" mce_bogus="1">#pic_shower_img li{ padding:0; margin:0; height:250px; *margin-bottom:-3px;} #pic_shower_img h2{ color:#FFF; font-weight:bold; font-size:20px; margin-top:10px; text-align:center;} #pic_shower_img p{ color:#FF0; text-indent:2em; margin-top:10px; padding:10px; line-height:1.8em;} #pic_shower_img .opacity{ position:absolute; right:0; top:0; width:250px; height:250px; background:#000; opacity:0.5; filter:alpha(opacity=50); _right:20px;} #pic_shower_img .content{ position:absolute; right:0; top:0; width:250px; height:250px; _right:20px;} #pic_shower_img .button{ text-align:center; padding:5px; position:absolute; bottom:10px; width:100%;} #pic_shower_bar{ padding:5px; height:20px; text-align:center; overflow:hidden; zoom:1; margin:0 auto;} #pic_shower_bar .hover{ background:#CCC; border:#CCC 1px solid;} #pic_shower_bar input{ margin-right:5px; cursor:pointer; background:#666; border:#CCC 1px solid; width:40px; height:18px;}</style> <div class="focus" style="position:static;" mce_style="position:static;"> <div style=" width:980px; height:250px; position:relative; overflow:hidden;"> <ul id="pic_shower_img" style="position:absolute;" mce_style="position:absolute;"></ul> </div> <div style="background:#999; width:980px;"> <ul id="pic_shower_bar"> </ul> </div> </div> 最后是JS代码 function pic_shower(a,b){ var a=document.getElementById(a)||null,b=document.getElementById(b)||null,self=this; var per=250,swapTime=2; var img_w = 960, img_h = 250, button_src="./images/pic_shower_button.png"; this.nowShower=0; if (!a||!b){window.alert("找不到元素");return false;} this.setEvent = function (){ for (var i=0; i<b.getElementsByTagName("input").length; i++){ (function(){ var j = i; b.getElementsByTagName("input")[j].onmouseover = function(){ self.goto(j);}; a.getElementsByTagName("li")[j].onmouseover = function(){ self.pauseAuto();}; a.getElementsByTagName("li")[j].onmouseout = function(){ self.continueAuto();}; })(); } } this.goto = function(i){ if (self.moveTimer) window.clearInterval(self.moveTimer); self.pauseAuto(); self.nowShower = i; for (var j=0;j<b.getElementsByTagName("input").length; j++){ if (j==i) b.getElementsByTagName("input")[j].className="hover"; else b.getElementsByTagName("input")[j].className=""; } self.moveTimer = window.setInterval(function(){ var finalTop = 0 - i*per; if (a.offsetTop != finalTop){ var newTop = (finalTop - a.offsetTop) / 3 + a.offsetTop; newTop = Math.abs(finalTop-newTop) < 2 ? finalTop : newTop a.style.top = newTop+"px"; }else { if (self.moveTimer) window.clearInterval(self.moveTimer); self.continueAuto(); } }, 20); }; this.auto = function(){ if (self.nowShower == a.getElementsByTagName("li").length-1){ self.goto(0); }else { self.goto(self.nowShower+1); } } this.pauseAuto = function(){ if (self.autoTimer) window.clearInterval(self.autoTimer); } this.continueAuto = function(){ self.pauseAuto(); window.clearInterval(self.autoTimer); self.autoTimer =window.setInterval(function(){self.auto();}, swapTime*1000); } this.readFile = function(){ var aj; try{aj=new ActiveXObject("Msxml2.XMLHTTP");} catch(e){ try{aj=new ActiveXObject("Microsoft.XMLHTTP");} catch(E){aj=false;} } if(!aj&&typeof XMLHttpRequest!=undefined)aj=new XMLHttpRequest(); aj.open("GET","1.xml",true); aj.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8'); aj.onreadystatechange=function(){ if(aj.readyState==4&&aj.status==200){ var obj = aj.responseXML; var data = obj.getElementsByTagName("data")[0]; self.swapTime = data.getAttribute("time"); // 设置时间 var arr = []; var btn = []; for (var i=0; i<data.getElementsByTagName("pic").length; i++){ var pic = data.getElementsByTagName("pic")[i]; var src = pic.getAttribute("src"); var link = pic.getAttribute("link"); var title = pic.getAttribute("title"); var content = pic.getAttribute("content"); arr.push("<li style="/" mce_style="/""height:250px;/"><div style="/" mce_style="/""position:relative;/"><a href="/" mce_href="/"""+link+"/" target=/"_blank/"><img src="/" mce_src="/"""+src+"/" style="/" mce_style="/""width:"+img_w+"px;height:"+img_h+"px/" /></a><div class=/"opacity/"></div><div class=/"content/"><h2>"+title+"</h2><p>"+content+"</p><div class=/"button/"><a href="/" mce_href="/"""+link+"/" target=/"_blank/"><img src="/" mce_src="/"""+button_src+"/" /></a></div></div></div></li>") btn.push("<input type=/"button/" />"); } a.innerHTML = arr.join(""); b.innerHTML = btn.join(""); self.setEvent(); self.goto(0); } } aj.send(null); } self.readFile(); } var test = new pic_shower("pic_shower_img", "pic_shower_bar");