<mce:script src="../js/jquery-1.3.min.js" mce_src="js/jquery-1.3.min.js" language="javascript" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- var timeId = ""; $().ready(function(){ $("#as img").hover( function(){ $("#"+this.id).fadeTo("fast",0.6); $("#dd").attr("src",this.src).fadeTo("fast",1); window.clearInterval(timeId); }, function(){ $("#"+this.id).fadeTo("fast",1); $("#dd").fadeTo("fast",0.6); timeId= window.setInterval(c,2000); }); $("#as img").css("height","50px").css("width","50px"); timeId= window.setInterval(c,2000); }) var currentNum = "1"; var preNum = "1"; function c() { preNum = currentNum; ++currentNum; if(currentNum>3) { currentNum = 1; } $("#dd").attr("src",$("#"+currentNum).attr("src")); $("#"+currentNum).fadeTo("slow",1); $("#"+preNum).fadeTo("slow",0.5); $("#dd").fadeTo("slow",0.5); $("#dd").fadeTo("slow",1); } // --></mce:script> <form id="form1" runat="server"> <div style="float: left; width: 400px; border: red 1px solid; margin-left: 60px;"> <img id="dd" src="../images/logo.gif" mce_src="images/logo.gif" width="600px" height="200px" /> </div> <br /> <div id="as" style="float: left; width: 603px; border: red 1px solid; margin-left: 60px;"> <div style="float: left; margin-right: 10px;" mce_style="float: left; margin-right: 10px;"> <img id="1" width="50px" height="50px" src="../img/a90142.jpg" mce_src="img/a90142.jpg" /></div> <div style="float: left; margin-right: 10px;" mce_style="float: left; margin-right: 10px;"> <img id="2" src="../images/110.gif" mce_src="images/110.gif" /></div> <div style="float: left;" mce_style="float: left;"> <img id="3" src="../images/login.gif" mce_src="images/login.gif" /></div> </div> </form> 不过显示效果还是比较粗糙的