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

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

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

 

切换到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];
}

 

推荐阅读

    Fireworks教程:复杂图像变换(2)

    Fireworks教程:复杂图像变换(2),图像变换,教程,点击,图像,设置,显示,位置,Fireworks教程:复杂图像变换(2) 如果点击“更多选项”按钮,也

    Fireworks教程:复杂图像变换(1)

    Fireworks教程:复杂图像变换(1),图像变换,教程,对象,图像,选择,多重,点击,Fireworks教程:复杂图像变换(1) 2、复杂的图像变换 先在画布上

    Fireworks教程:简单图像变换

    Fireworks教程:简单图像变换,图像变换,教程,图形,图像,变换,对象,图象,Fireworks教程:简单图像变换 图像变换技术在网页中经常被用到,即当

    Fireworks创建简单变换图象

    Fireworks创建简单变换图象,图象,变换,指针,手柄,选择,图像,上方,Fireworks创建简单变换图象 简单变换图象就是直接把第一帧上的图像替换

    ppt2010基础教程:移动幻灯片

    ppt2010基础教程:移动幻灯片,幻灯片,位置,选择,鼠标,操作,第二,按住,ppt2010基础教程:移动幻灯片 移动幻灯片 使用窗口左侧

    ppt2010基础教程:播放幻灯片

    ppt2010基础教程:播放幻灯片,幻灯片,显示,提示,演示文稿,单击,鼠标,片时,ppt2010基础教程:播放幻灯片 播放演示文稿 让我们

    ppt2010基础教程:打印指定幻灯片

    ppt2010基础教程:打印指定幻灯片,幻灯片,打印,单击,选择,查看,编号,演示文稿,ppt2010基础教程:打印指定幻灯片 在本例中,单击“打印全部幻灯

    ppt2010基础教程:选择幻灯片主题

    ppt2010基础教程:选择幻灯片主题,主题,幻灯片,选择,输入,选项卡,布局,运行,ppt2010基础教程:选择幻灯片主题 首先,尝试创建新的演示文稿并选