<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:style type="text/css"><!-- div,ul {margin:0; padding:0;} li {float:left; list-style:none} img {border:0;} #img_change {position:relative; width:450px; height:296px; background-color:#FC3; overflow:hidden; z-index:1;} #img_list {position:absolute; top:0px; left:0px; width:1800px; height:296px;} #img_backdiv {position:absolute;width:450px; height:70px; background-color:#000; bottom:0; z-index:1; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;} #img_btn {position:absolute;width:450px; height:70px; bottom:0; z-index:3;} #img_btn li {margin-top:10px; margin-left:30px; border:#666 solid 2px; height:50px;} #img_btn .imgchange { border:#FFF solid 2px;} --></mce:style><style type="text/css" mce_bogus="1">div,ul {margin:0; padding:0;} li {float:left; list-style:none} img {border:0;} #img_change {position:relative; width:450px; height:296px; background-color:#FC3; overflow:hidden; z-index:1;} #img_list {position:absolute; top:0px; left:0px; width:1800px; height:296px;} #img_backdiv {position:absolute;width:450px; height:70px; background-color:#000; bottom:0; z-index:1; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;} #img_btn {position:absolute;width:450px; height:70px; bottom:0; z-index:3;} #img_btn li {margin-top:10px; margin-left:30px; border:#666 solid 2px; height:50px;} #img_btn .imgchange { border:#FFF solid 2px;}</style> <mce:script type="text/javascript"><!-- function $(id) { return document.getElementById(id); } function className(){ var elemList = $('img_btn').getElementsByTagName('li'); for(var i=0;i<elemList.length;i++){ elemList[i].className=''; } } function moveElement(elemId,elem_x,interval){ var elem = $('img_list'); var elemLeft = parseInt(elem.style.left); clearTimeout(elem.move); if(elemLeft>elem_x){ var moveWith = Math.ceil((elemLeft-elem_x)/15); elemLeft = elemLeft - moveWith; } if(elemLeft<elem_x){ var moveWith = Math.ceil((elem_x-elemLeft)/15); elemLeft= elemLeft + moveWith; } elem.style.left = elemLeft + 'px'; var repeat = "moveElement('"+elemId+"',"+elem_x+","+interval+")"; elem.move = setTimeout(repeat,interval); } function imgBtnChange(){ var elemList = $('img_btn').getElementsByTagName('li'); elemList[0].οnmοusemοve=function(){ className(); moveElement('img_list',0,5); elemList[0].className='imgchange'; } elemList[1].οnmοusemοve=function(){ className(); moveElement('img_list',-450,5); elemList[1].className='imgchange'; } elemList[2].οnmοusemοve=function(){ className(); moveElement('img_list',-900,5); elemList[2].className='imgchange'; } elemList[3].οnmοusemοve=function(){ className(); moveElement('img_list',-1350,5); elemList[3].className='imgchange'; } } var ifMoveElement = false; function playElement(){ if(ifMoveElement){return;} var num; var elemList = $('img_btn').getElementsByTagName('li'); for(var i=0;i<elemList.length;i++){ if(elemList[i].className=='imgchange'){num=i;} } if(num==0){ className(); moveElement('img_list',-450,5); elemList[1].className='imgchange'; } if(num==1){ className(); moveElement('img_list',-900,5); elemList[2].className='imgchange'; } if(num==2){ className(); moveElement('img_list',-1350,5); elemList[3].className='imgchange'; } if(num==3){ className(); moveElement('img_list',0,5); elemList[0].className='imgchange'; } } function img_change_onmove(){ $('img_change').οnmοusemοve=function(){ifMoveElement=true;}; $('img_change').οnmοuseοut=function(){ifMoveElement=false;}; } setInterval(playElement,1000); window.οnlοad=function(){imgBtnChange();img_change_onmove();} // --></mce:script> </head> <body> <div id="img_change"> <div id="img_list" style="top:0; left:0;"> <ul> <li id="s1"><img src="images/74164133287.jpg" mce_src="images/74164133287.jpg" alt="" /></li> <li id="s2"><img src="images/B3164134719.jpg" mce_src="images/B3164134719.jpg" alt="" /></li> <li><img src="images/AC164135752.jpg" mce_src="images/AC164135752.jpg" alt="" /></li> <li><img src="images/73164136986.jpg" mce_src="images/73164136986.jpg" alt="" /></li> </ul> </div> <div id="img_backdiv"></div> <div id="img_btn"> <ul> <li id="a4" class="imgchange"><a href="#" mce_href="#"><img src="images/5F164137217.jpg" mce_src="images/5F164137217.jpg" alt="" /></a></li> <li id="a1"><a href="#" mce_href="#"><img src="images/A4164137404.jpg" mce_src="images/A4164137404.jpg" alt="" /></a></li> <li id="a2"><a href="#" mce_href="#"><img src="images/2D164141182.jpg" mce_src="images/2D164141182.jpg" alt="" /></a></li> <li id="a3"><a href="#" mce_href="#"><img src="images/48164141437.jpg" mce_src="images/48164141437.jpg" alt="" /></a></li> </ul> </div> </div> </body> </html>