<!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=gb2312" /> <meta http-equiv="imagetoolbar" content="no" /> <title>SCA Ad Image Process</title> <style type="text/css"> div#adBox{ width:437px; padding:4px; border:1px #D7D6D6 solid; overflow:hidden; } div#adBox .imgBox{ height:316px; width:437px; } div#adBox #control{ width:437px; height:12px; overflow:hidden; } div#adBox #control div{ width:12px; height:12px; font-size:9px; font-family:Arial, Helvetica, sans-serif; line-height:13px; text-indent:1px; color:#eeeeee; text-align:center; float:right; margin-left:1px; cursor:pointer; background:#666666;} /*滚动图片*/ #focus{ border: #D7D6D6 1px solid; margin-top: 10px; padding:5px; width:435px; position: relative; height: 58px } #description{ width:392px;/*=78*5+10*2 */ height:58px; overflow:hidden; margin:0px 10px; float:left; } .dis{float:left;width:11px;} #description ul, #description li {float:left;margin: 0;padding: 0;height:58px;} #description li img {margin-right:4px;padding:1px;border:#D7D6D6 1px solid;} </style> <script type="text/javascript"> var obj=document.getElementById; var currentAd=0; var adTimer; var baseurl="http://www.xmarea.com/webtest/testPic/";//广告图片的根目录 var adDelay=5000;//广告切换时间 var controlItemId="controlitem";//根据自己的页面为跟踪条取ID前缀 var mapcolor="#ff0000";//Ad跟踪条颜色,建议与信息栏的a:hover一样 var imglink=new Array(); imglink[0]=new Array("1.jpg","#") imglink[1]=new Array("2.jpg","#") imglink[2]=new Array("3.jpg","#") imglink[3]=new Array("4.jpg","#") imglink[4]=new Array("5.jpg","#") imglink[5]=new Array("6.jpg","#") imglink[6]=new Array("1.jpg","#") imglink[7]=new Array("2.jpg","#") imglink[8]=new Array("3.jpg","#") imglink[9]=new Array("4.jpg","#") var smallImg=new Array(); smallImg[0]=new Array("s_1.jpg") smallImg[1]=new Array("s_2.jpg") smallImg[2]=new Array("s_3.jpg") smallImg[3]=new Array("s_4.jpg") smallImg[4]=new Array("s_5.jpg") smallImg[5]=new Array("s_6.jpg") smallImg[6]=new Array("s_1.jpg") smallImg[7]=new Array("s_2.jpg") smallImg[8]=new Array("s_3.jpg") smallImg[9]=new Array("s_4.jpg") </script> </head> <body> <div id="adBox"> <div class="imgBox"><img src="images/pro_imgs/1.jpg" style="filter: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=1,motion=forward);" id="show" alt="" /></div> </div> <!--滚动图片--> <div id=focus> <div class="dis"><img src="http://www.xmarea.com/webtest/testPic/left_scrool.jpg" alt="left" name="img_l" id="img_l" onClick="doSlide(-1)" /></div> <div id=description> <div id="content0" style="height:58px;width:900px"><!--(#description.width=395px)*3--> <ul id="content" class=content> </ul> </div> </div> <div class="dis"><img src="http://www.xmarea.com/webtest/testPic/right_scrool.jpg" alt="right" id="img_r" onClick="doSlide(1)" /></div> </div> <script> //幻灯片效果 var navigatorName = "Microsoft Internet Explorer"; var isIE = false; if(navigator.appName==navigatorName) isIE = true; for(i=0;i<imglink.length;i++){ var itemBox=document.createElement('ul'); itemBox.innerHTML="<li id='"+controlItemId+i+"'><a href='#'><img src='"+baseurl+smallImg[i]+"'/></a></li>"; document.getElementById("content").appendChild(itemBox);} var controlItem=document.getElementById("content").getElementsByTagName("li"); var controlItem_2=document.getElementById("content").getElementsByTagName("img"); function changeImg(){ if(isIE) document.getElementById("show").filters[0].apply(); document.getElementById("show").src=baseurl+imglink[currentAd][0]; if(isIE) document.getElementById("show").filters[0].play(); for(i=0;i<controlItem.length;i++){ controlItem_2[i].style.borderColor=(i==currentAd)?mapcolor:"#D7D6D6"; } if(currentAd==5){doSlide(1)} if(currentAd==9){doSlide(-1)} currentAd++; currentAd=(currentAd==imglink.length)?0:currentAd; adTimer=setTimeout("changeImg()",adDelay);} changeImg(); for(i=0;i<controlItem.length;i++){ controlItem[i].οnclick=function(){ clearTimeout(adTimer); currentAd=parseInt(this.id.substring(this.id.length-1,this.id.length)); changeImg();}; } //滚动效果 var ok_obj=document.getElementById("content").getElementsByTagName("LI") var ok=Math.ceil(ok_obj.length/5)-1 var ele=document.getElementById("description"); var w=ele.clientWidth; var n=20,t=50; var timers=new Array(n); var k=0;doSlide(0); function doSlide(s){ if (k>=ok &&s>0|| k<=0 &&s<0) //alert("已经到头了"); return; else{ k+=s; var x=ele.scrollLeft; var d=k*w-x; for(var i=0;i<n;i++)( function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; // alert(x) timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t); } )(); }} </script> </body> </html> |