JS图片轮换广告代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS图片轮换广告代码轮播滚动切换特效的示例演示效果:

当前平台(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>
<style type="text/css">
body{text-align:center;}
td {font-size: 12px;}
#textslide{color:#333333;}
</style>
</head>
<body>
<table width=325 border=0 cellpadding=0 cellspacing=0>
  <tr valign=top>
    <td colspan=3><a onClick="gotoshow()" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"><img src="images/ad-01.jpg" width=325 height=190 name="slide" border=0></a></td>
  </tr>
  <tr>
    <td width=229 height="19" align=center bgcolor=#f4f4f4 class="white"><div id=textslide>焦点图标题层</div></td>
    <td width=1 bgcolor=#7C7C7C><div style="position:relative">
      <div style="position:absolute;top:10px">
        <table width=95 border=0 cellpadding=0 cellspacing=0>
          <tr valign=top align=center>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu1 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan1 width=10 height=3 border=0></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu2 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan2 width=10 height=3></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu3 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan3 width=10 height=3></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu4 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan4 width=10 height=3></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative; left: 1px;">
              <div id=xiaotu5 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan5 width=10 height=3></div>
            </div></td>
          </tr>
        </table>
      </div>
    </div></td>
    <td width=95 height="19"><table width=95 border=0 cellpadding=0 cellspacing=0>
      <tr valign=top>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(0)" onMouseOut="ou()"><img src="images/1.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(1)" onMouseOut="ou()"><img src="images/2.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(2)" onMouseOut="ou()"><img src="images/3.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(3)" onMouseOut="ou()"><img src="images/4.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19"><a style="cursor:hand" onMouseOver="ove(4)" onMouseOut="ou()"><img src="images/5.gif" width="19" height="19" border=0></a></td>
      </tr>
    </table></td>
  </tr>
</table>
<p>
<script language=JavaScript src="js/5adpics.js"></script>
</body></html>

JS代码(5adpics.js):

//slideimages����Ϊ�任��ͼvar slideimages=new Array();
	slideimages[0]="images/ad-01.jpg";
	slideimages[1]="images/ad-02.jpg";
	slideimages[2]="images/ad-03.jpg";
	slideimages[3]="images/ad-04.jpg";
	slideimages[4]="images/ad-05.jpg";
	//slidetext����Ϊ�任������var slidetext=new Array();
	slidetext[0]="����ͼ01";
	slidetext[1]="����ͼ02";
	slidetext[2]="����ͼ03";
	slidetext[3]="����ͼ04";
	slidetext[4]="����ͼ05";
	//slidetext����Ϊ�����ͼ�������ĵ�ַvar slidelinks=new Array();
	slidelinks[0]="http://www.lanrentuku.com";
	slidelinks[1]="http://www.lanrentuku.com";
	slidelinks[2]="http://www.lanrentuku.com";
	slidelinks[3]="http://www.lanrentuku.com";
	slidelinks[4]="http://www.lanrentuku.com";
	//����ͼ��ʼ���ݣ���startvar slidespeed=3000var slidesanjiaoimages=new Array("images/bian2.gif","images/bian1.gif");
	var slidesanjiaoimagesname=new Array("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5");
	var filterArray=new Array();
	filterArray[0]="progid:DXImageTransform.Microsoft.Pixelate (enabled=false,duration=2,maxSquare=25 )";
	filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)";
	filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)";
	filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8,duration=1)";
	filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )";
	var imageholder=new Array()var ie55=window.createPopupfor (i=0;
	i<slideimages.length;
	i++){
	imageholder[i]=new Image()imageholder[i].src=slideimages[i]}
function tu_ove(){
	clearTimeout(setID)}
function ou(){
	slideit()}
var whichlink=0var whichimage=0function gotoshow(){
	window.open(slidelinks[whichlink]);
}
function slideit(){
	document.images.slide.style.filter=filterArray[whichimage];
	//alert(document.images.slide.style.filter);
	pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000):0//alert(pixeldelay);
	if (!document.images) returnif (ie55){
	document.images.slide.filters[0].apply();
	document.images.slide.filters[0].play();
}
document.images.slide.src=imageholder[whichimage].srcdocument.getElementById("textslide").innerText=slidetext[whichimage];
	document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
	document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
	if (ie55) document.images.slide.filters[0].play()whichlink=whichimagewhichimage=(whichimage<slideimages.length-1)? whichimage+1:0setID=setTimeout("slideit()",slidespeed+pixeldelay)}
slideit()function ove(n){
	clearTimeout(setID)whichimage=n;
	document.images.slide.src=imageholder[whichimage].srcdocument.getElementById("textslide").innerText=slidetext[whichimage];
	document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
	document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
	document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
}

附件:下载该文件资源,减少时间成本(增值服务)