焦点图幻灯片效果使用方法
切换到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()}
var whichlink=0
var whichimage=0
function 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) return
if (ie55) {
document.images.slide.filters[0].apply();
document.images.slide.filters[0].play();
}
document.images.slide.src=imageholder[whichimage].src
document.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=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setID=setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
function ove(n){
clearTimeout(setID)
whichimage=n;
document.images.slide.src=imageholder[whichimage].src
document.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];
}