一款拍拍网产品推荐广告轮换效果

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>拍拍网产品推荐广告轮换</title>
</head>

<body>
<div align="center">

<div style="margin: 0px; overflow: hidden; width: 360px; position: relative; height: 195px;">
<div id=l1 style="left: 0px; position: absolute; top: 0px"><a id=linkl1
      href="http://www.zzzyk.com/"><img
      id=img51 height=195 src="images/index_roll_1.jpg" width=360
      border=0 /></a></div>
<div id=l2 style="left: 360px; position: absolute; top: 0px"><a id=linkl2
      href="http://www.zzzyk.com/"><img id=img52
      height=195 src="images/index_roll_2.jpg" width=360
      border=0 /></a></div>
<div id=l3 style="left: 720px; position: absolute; top: 0px"><a id=linkl3
      href="http://www.zzzyk.com/"><img id=img53
      height=195 src="images/index_roll_3.jpg" width=360
      border=0 /></a></div>
<div id=l4 style="left: 1080px; position: absolute; top: 0px"><a id=linkl4
      href="http://www.zzzyk.com/"><img id=img54
      height=195 src="images/index_roll_4.jpg" width=360
      border=0 /></a></div>
<div id=l5 style="left: 1440px; position: absolute; top: 0px"><a id=linkl5
      href="http://www.zzzyk.com/"><img
      id=img55 height=195 src="images/index_roll_5.jpg" width=360
      border=0 /></a></div>
<div id=l0
      style="z-index: 999999; left: 0px; position: absolute; top: 0px"><a
      id=link5pic href="http://www.zzzyk.com/"
      target=_blank><img height=195 src="images/index_roll_bg.gif"
      width=360 border=0 /></a></div>
<div id=lfloat
      style="z-index: 9999999; left: 193px; width: 150px; position: absolute; top: 174px; height: 15px"><a
      id=btnimg1 href="http://www.zzzyk.com/"
      target=_blank><img id=pnl1 onmouseo教程ver="网页特效:picsw('l1');"
      style="border-top-style: none; margin-right: 5px; border-right-style: none; border-left-style: none; border-bottom-style: none"
      onmouseout=javascript:startauto(); height=15
      src="images/pl1.gif" width=25 name=pnl1 /></a><a id=btnimg2
      href="http://www.zzzyk.com/"
      target=_blank><img id=pnl2 onmouseover="javascript:picsw('l2');"
      style="border-top-style: none; margin-right: 5px; border-right-style: none; border-left-style: none; border-bottom-style: none"
      onmouseout=javascript:startauto(); height=15
      src="images/pl2a.gif" width=25 /></a><a id=btnimg3
      href="http://www.zzzyk.com/" target=_blank><img
      id=pnl3 onmouseover="javascript:picsw('l3');"
      style="border-top-style: none; margin-right: 5px; border-right-style: none; border-left-style: none; border-bottom-style: none"
      onmouseout=javascript:startauto(); height=15
      src="images/pl3a.gif" width=25 /></a><a id=btnimg4
      href="http://www.zzzyk.com/" target=_blank><img
      id=pnl4 onmouseover="javascript:picsw('l4');"
      style="border-top-style: none; margin-right: 5px; border-right-style: none; border-left-style: none; border-bottom-style: none"
      onmouseout=javascript:startauto(); height=15
      src="images/pl4a.gif" width=25 /></a><a id=btnimg5
      href="http://www.zzzyk.com/"
      target=_blank><img id=pnl5 onmouseover="javascript:picsw('l5');"
      style="border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none"
      onmouseout=javascript:startauto(); height=15
      src="images/pl5a.gif" width=25 /></a></div>
</div>
<script language=javascript type=text/javascript>

var rdm=math.random();
rdm=math.floor(rdm*5)+1;
document.getelementbyid("img51").src="images/index_roll_"+rdm+".jpg";
document.getelementbyid("linkl1").href=document.getelementbyid("linkl"+rdm+"").href;
document.getelementbyid("img5"+rdm+"").src="images/index_roll_1.jpg";
document.getelementbyid("linkl"+rdm+"").href="http://www.zzzyk.com/"
document.getelementbyid("link5pic").href=document.getelementbyid("linkl1").href;
document.getelementbyid("btnimg1").href=document.getelementbyid("linkl1").href;
document.getelementbyid("btnimg"+rdm+"").href="http://www.zzzyk.com/"
var layeri=0;
var stops教程how=0;
var timeout=0;

function moveformat(id){
if(stopshow==0){
picswin(id);
var browser=navigator.appname;
if(browser!="microsoft internet explorer"){
layeri++;
document.getelementbyid(id).style.zindex = layeri;
document.getelementbyid(id).style.left=(0+"px");
var linkid="link"+id;
document.getelementbyid("link5pic").href=document.getelementbyid(linkid).href;
}
else{
document.getelementbyid(id).style.posleft = 360;
layeri++;
document.getelementbyid(id).style.zindex = layeri;
movestart(id);
}
}
}

function movestart(id){
if(document.getelementbyid(id).style.posleft!=0){
var mnum=document.getelementbyid(id).style.posleft*0.2;
var x=document.getelementbyid(id).style.posleft-mnum;
document.getelementbyid(id).style.posleft=x;
moveid=id;
settimeout("movestart(moveid);",30);
}
else{
var linkid="link"+id;
document.getelementbyid("link5pic").href=document.getelementbyid(linkid).href;
}
}

var i=1;

function showindexad(){
if (i<5 && stopshow==0){
i++;
var picid="l";
picid=picid+i;
settimeout("moveformat('"+picid+"');showindexad();",5000);
}
else if(stopshow==0){
i=1;
var picid="l";
picid=picid+i;
settimeout("moveformat('"+picid+"');showindexad();",5000);
}
else{
timeout=1;
}
}

showindexad();

function picsw(id) {
if(document.getelementbyid("pn"+id+"").src!="images/p"+id+".gif"){
picswin(id);
showindexad2(id);
}
}

function picswin(id){
document.getelementbyid("pnl1").src="images/pl1a.gif";
document.getelementbyid("pnl2").src="images/pl2a.gif";
document.getelementbyid("pnl3").src="images/pl3a.gif";
document.getelementbyid("pnl4").src="images/pl4a.gif";
document.getelementbyid("pnl5").src="images/pl5a.gif";
document.getelementbyid("pn"+id+"").src="images/p"+id+".gif";
}

function showindexad2(id){
stopshow=1;
var browser=navigator.appname;
if(browser!="microsoft internet explorer"){
layeri++;
document.getelementbyid(id).style.zindex = layeri;
document.getelementbyid(id).style.left=(0+"px");
var linkid="link"+id;
document.getelementbyid("link5pic").href=document.getelementbyid("link"+id).href;
}
else{
document.getelementbyid(id).style.posleft = 360;
layeri++;
document.getelementbyid(id).style.zindex = layeri;
movestart(id);
}
}
function startauto(){
stopshow=0;
if(timeout==1){
showindexad();
timeout=0;
}
}
</script>
<br>
</div>
</body>
</html>

源码下载
http://down.zzzyk.com/down/code/js/jiaodiantu/2010/1109/21718.html
效果在线预览
http://g.zzzyk.com/javascript/code/20101109/tt

补充：网页制作,js教程