用JavaScript实现图片切换效果

这是最近改网站的时候,改的一个效果,希望对大家有帮助

<style type=text/css>
  #FocusImg_JS {
 BORDER-RIGHT: #fff 9px solid; BORDER-TOP: #fff 9px solid; FONT-SIZE: 14px; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #fff 9px solid; WIDTH: 1000px; BORDER-BOTTOM: #fff 9px solid; FONT-FAMILY: "宋体"; HEIGHT: 500px
}<!-- 这里设置左边大图的大小,宽度-->
#FocusImg_JS IMG {
 BORDER-RIGHT: #b40033 0px solid; BORDER-TOP: #b40033 0px solid; BORDER-LEFT: #b40033 0px solid; BORDER-BOTTOM: #b40033 0px solid ;
}
#FIJ_L {
 FLOAT: left; MARGIN: 0px 4px 0px 0px; OVERFLOW: hidden; WIDTH: 900px; HEIGHT: 900px
}
#FIJ_L SPAN {
 DISPLAY: block; OVERFLOW: hidden; WIDTH: 900px; HEIGHT: 500px
}<!-- 这里设置左边图的大小,宽度-->
#FIJ_L P {
 BORDER-RIGHT: #b40033 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b40033 0px; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: bold; BACKGROUND: #fff; PADDING-BOTTOM: 0px; BORDER-LEFT: #b40033 0px solid; PADDING-TOP: 8px; BORDER-BOTTOM: #b40033 0px solid; HEIGHT: 22px; TEXT-ALIGN: left
}
#FIJ_L P A {
 COLOR: #000; TEXT-DECORATION: none
}
#FIJ_L P A:visited {
 COLOR: #000; TEXT-DECORATION: none
}
#FIJ_L P A:hover {
 COLOR: #c00; TEXT-DECORATION: underline
}
#FIJ_L P A:active {
 COLOR: #c00; TEXT-DECORATION: underline
}<!-- 这里设置右边小图的大小,宽度-->
#FIJ_R {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 89px; PADDING-TOP: 0px; HEIGHT: 600px
}
.id_FIJ_R_ImgBlk {
 CLEAR: both; OVERFLOW: hidden; WIDTH: 150px; CURSOR: pointer; HEIGHT: 100px
}
.id_FIJ_R_ImgBlk_On {
 CLEAR: both; BORDER-RIGHT: #a0e635 4px solid; BORDER-TOP: #a0e635 4px solid; OVERFLOW: hidden; BORDER-LEFT: #a0e635 4px solid; WIDTH: 150px; CURSOR: pointer; BORDER-BOTTOM: #a0e635 4px solid; HEIGHT: 100px
}<!-- 这里设置右边小图的大小,宽度-->
.id_FIJ_R_ImgBlk_On IMG {
 
}
  </style>
          
            <script type=text/javascript>
var TimeOut=5000;              //切换时间(单位毫秒);
var StartType="onmouseover";   //缩略图触发动作
var imgUrl=new Array();
var imgSUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
imgUrl[1]='img/photo1.jpg';
imgSUrl[1]='img/1.jpg';
imgtext[1]='';
/*imgLink[1]='/focus/index.html';*/
/*imgAlt[1]='谢贤李冰冰许晴现身机场再掀巨星来京潮';*/
imgUrl[2]='img/photo2.jpg';
imgSUrl[2]='img/2.jpg';
imgtext[2]='';
/*imgLink[2]='/bbs/00/2155813.html';
imgAlt[2]='《画皮》全揭秘 剧照宏伟壮丽精美';*/
imgUrl[3]='img/photo3.jpg';
imgSUrl[3]='img/3.jpg';
imgtext[3]='';
/*imgLink[3]='http://ent.daqi.com/bbs/00/2154376.html';
imgAlt[3]='蔡依林就医抢救烂痘脸 疑与爱犬亲密惹祸';*/
imgUrl[4]='img/photo4.jpg';
imgSUrl[4]='img/4.jpg';
imgtext[4]='';
/*imgLink[4]='/bbs/00/2157128.html';
imgAlt[4]='范冰冰素面禁止拍照 撞衫女王再遇尴尬';*/
imgUrl[5]='img/photo1.jpg';
imgSUrl[5]='img/1.jpg';
imgtext[5]='';
/*imgLink[5]='/bbs/00/2157069.html';
imgAlt[5]='菲尔普斯当年和梁洛施的合影 很性感啊';*/
    </script>
            <script type=text/javascript>
function changeimg(n)
{
 adNum=n;window.clearInterval(theTimer);adNum=adNum-1;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]!="")&&(imgAlt[i]!="")*/)
 {
  count++;
 }
 else
 {
  break;
 }
}
function playTran()
{
if(document.all)
 {
  imgInit.filters.revealTrans.play();
 }
}
var key=0;
function nextAd()
{
if(adNum<(imgUrl.length-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];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('FIJ_R_IB_'+adNum).className='id_FIJ_R_ImgBlk_On';
for(var i=1;i<=count;i++)
{
 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('<div id="FocusImg_JS">');
document.write(' <div id="FIJ_L" >');
document.write('  <span><a id="imgLink" href="'+imgLink[1]+'" target="_blank"><img width="900" height="500" style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" name="imgInit" alt="" title="'+imgAlt[1]+'"/></a></span>');
document.write('  <p id="focustext">'+imgtext[1]+'</p>');
document.write(' </div>');
document.write(' <div id="FIJ_R">');
for(var i=1;i<imgUrl.length;i++)
{
 document.write('  <div id="FIJ_R_IB_'+i+'" class="id_FIJ_R_ImgBlk"><a href="javascript:;" '+StartType+'="javascript:changeimg('+i+')" title=""><img width="100" height="100" src="'+imgSUrl[i]+'" alt=""/></a>');
 document.write(' </div>');
}
nextAd();
document.write('</div>');
    </script>
       

转载于:https://www.cnblogs.com/epwqgdnvrhok/archive/2008/08/23/1274752.html