JS 幻灯片(左方大图右边小图)
日期：2014-05-16 浏览次数：20397 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
?
</head>
<body onload-sideit()>
<div class="FocusImg">
<script type="text/javascript">
<!--
//配置参数
var TimeOut=5000,StartType="onmouseover"; //定义了幻灯切换时间为5000毫秒，并定义了事件名称为onmouseover，即鼠标悬停事件。
var imgUrl=[]; //定义不定长的图片地址数组变量
var imgSUrl=[]; //定义不定长的缩略图地址数组变量
var imgLink=[]; //定义不定长的图片链接地址数组变量
var imgtext=[]; //定义不定长的图片名称数组变量
var adNum=0; //定义当前显示的图片序号，并设置默认值为0
//以下对相关变量进行赋值
imgUrl[1]='01.JPG';//大图
imgSUrl[1]='01.JPG';//小图
imgtext[1]='<a href="01.jpg" target="_blank">图片一</a>';//标题（包含链接）
imgLink[1]='01.jpg';//大图链接
imgUrl[2]='02.jpg';//大图
imgSUrl[2]='02.jpg';//小图
imgtext[2]='<a href="02.jpg" target="_blank">图片二</a>';//标题（包含链接）
imgLink[2]='02.jpg';//大图链接
imgUrl[3]='03.jpg';//大图
imgSUrl[3]='03.jpg';//小图
imgtext[3]='<a href="03.jpg" target="_blank">图片三</a>';//标题（包含链接）
imgLink[3]='03.jpg';//大图链接
imgUrl[4]='04.jpg';//大图
imgSUrl[4]='04.jpg';//小图
imgtext[4]='<a href="04.jpg" target="_blank">图片四</a>';//标题（包含链接）
imgLink[4]='04.jpg';//大图链接
function changeimg(i){ //图片切换函数，此函数在鼠标在小图上悬停时将切换至该图片
adNum=i; //将当前显示的图片序号设为i，i是函数的参数（传入值）。
window.clearInterval(theTimer); //清除定时器
adNum=adNum-1; //将当前显示的图片序号减1 ，这样调用nextAd()时，刚v好是播放当前欲显示的那一张。
nextAd(); //播放下一张图片
}
function goUrl(){ //打开图片链接函数
window.open(imgLink[adNum],'_blank') ; //在新窗口中打开图片链接。
}
var count=0; //图片总数
for(i=1;i<imgUrl.length;i++){
if((imgUrl[i]!="")&&(imgLink[i]!="")&&(imgtext[i]!="")){ //图片地址、图片链接地址、图片名称不为空，即有效图片。
count++; //图片总数加1
}else{
break; //停止循环
}
}
function playTran(){ //开始切换图片
if(document.all){
?? imgInit.filters.revealTrans.play();
}
}
var key=0;
function nextAd(){ //显示下一张图片函数
if(adNum<(imgUrl.length-1)){ //如果当前图片序号小于图片总数，则当前图片序号加1，否则为1，即设为第一张图片。
?? adNum++;
}else{
?? adNum=1;
}
if(key==0){
?? key=1;
}else if(document.all){
?? imgInit.filters.revealTrans.Transition=23; //设置幻灯切换样式
?? imgInit.filters.revealTrans.apply(); //应用幻灯切换样式
?? playTran(); //开始图片切换
}
document.images.imgInit.src=imgUrl[adNum]; //显示第adNum张大图
document.getElementById('FIJ_R_IB_'+adNum).className='id_FIJ_R_ImgBlk_On'; //设置第adNum张小图的样式名为'id_FIJ_R_ImgBlk_On'，即当前显示的图片的缩略图
for(var i=1;i<=count;i++){ //将其它缩略图的样式名改为'id_FIJ_R_ImgBlk'
?? if(i!=adNum){
??? document.getElementById('FIJ_R_IB_'+i).className='id_FIJ_R_ImgBlk';
?? }
}
// document.getElementById('focustext').innerHTML=imgtext[adNum]; //设置当前图片的图片名称
document.getElementById('imgLink').href=imgLink[adNum]; //设置当前图片的图片链接地址
theTimer=setTimeout("nextAd()",TimeOut) //设置定时器，用于自动播放。
}
//以下为输出图片的显示框架。
document.write('<table width="520" height="300" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>');
document.write('<div id="FocusImg_JS">'); //最外面的容器
document.write('<div id="FIJ_L">'); //大图容器
document.write('<span><a id="imgLink" href="'+imgLink[1]+'" target="_blank"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:void(0);" name="imgInit" width="400" height="312" alt=""/></a></span>'); //大图
//document.write('<p id="focustext" align="center">'+imgtext[1]+'</p><p id="focustextBg"></p>'); //图片名称与图片名称的半透明背景
document.write('</div>');
document.write('</td><td>');
document.write('<div id="FIJ_R">'); //小图容器
for
