当前位置：首页> 正文

焦点图幻灯片效果使用方法

切换到dreamweaver的代码编辑窗口,把下面的代码复制到需要放置焦点图幻灯片效果的地方:

<table width=300 border=0 align="center" cellpadding=0 cellspacing=0>
<tr valign=top>
<td colspan=3><a onClick="gotoshow()" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"><img src="imagess/ad-01.webp" width=300 height=250 name="slide" border=0></a></td>
</tr>
<tr>
<td width=205 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=imagess/bian1.webp 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=imagess/bian1.webp 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=imagess/bian1.webp 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=imagess/bian1.webp 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=imagess/bian1.webp 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="imagess/1.webp" 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="imagess/2.webp" 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="imagess/3.webp" 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="imagess/4.webp" width="19" height="19" border=0></a></td>
<td width="19" height="19"><a style="cursor:hand" onMouseOver="ove(4)" onMouseOut="ou()"><img src="imagess/5.webp" width="19" height="19" border=0></a></td>
</tr>
</table></td>
</tr>
</table>
<script language=JavaScript src="js/5adpics.js"></script>

上面用到的1.webp、2.webp、3.webp、4.webp、5.webp、bian1.webp、bian2.webp实际是幻灯切换图片按钮，可以自己制作，也

可以到http://www.6699fa.cn/yuanjian.html找到“JS幻灯切换按钮图片”进行下载。

再在dreamweaver新建一个JS文件，文件名和上面代码中最后一行的src="js/5adpics.js"相对应，把下面的代码复制进去保存即可。

//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]="imagess/ad-01.webp";
slideimages[1]="imagess/ad-02.webp";
slideimages[2]="imagess/ad-03.webp";
slideimages[3]="imagess/ad-04.webp";
slideimages[4]="imagess/ad-05.webp";

//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="淘宝皇冠店铺精选";
slidetext[1]="岁月无痕正品丰胸精油";
slidetext[2]="皙肤泉肌肤问题专家";
slidetext[3]="买韩国服饰，到韩都衣舍";
slidetext[4]="左旋肉碱纯天然植物减肥";

//slidetext数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]="http://dianpu.tao123.com/?pid=mm_12644260_0_0&eventid=102167";
slidelinks[1]="http://imgbuyun.weixiu-service.com/up79/202111/e1ofpzoicen.html /> slidelinks[2]="http://imgbuyun.weixiu-service.com/up79/202111/zzuvyuyjvuw.html /> slidelinks[3]="http://imgbuyun.weixiu-service.com/up79/202111/adrapgsqsy2.html /> slidelinks[4]="http://imgbuyun.weixiu-service.com/up79/202111/vzjemw4qe11.html

//焦点图初始内容－－start
var slidespeed=3000

var slidesanjiaoimages=new Array("imagess/bian2.webp","imagess/bian1.webp");
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.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function tu_ove(){clearTimeout(setID)}
function ou(){slideit()}