拍拍网产品推荐广告轮换轮播滚动切换特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是拍拍网产品推荐广告轮换轮播滚动切换特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为拍拍网产品推荐广告轮换[JS..." />
<title>拍拍网产品推荐广告轮换[JS...</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="#"><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="#"><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="#"><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="#"><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="#"><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="#" 
      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="#" 
      target=_blank><img id=pnl1 onmouseover="javascript: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="#" 
      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="#" 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="#" 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="#" 
      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="#"
document.getElementById("link5pic").href=document.getElementById("linkl1").href;
document.getElementById("btnimg1").href=document.getElementById("linkl1").href;
document.getElementById("btnimg"+rdm+"").href="#"
var layeri=0;
var stopshow=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>
</div>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)