javascript模拟flash幻灯效果

最新推荐文章于 2025-07-30 10:00:23 发布

原创最新推荐文章于 2025-07-30 10:00:23 发布 · 809 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flash #javascript #border #class #filter #function

网络技术之ASP篇专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用 Flash 效果实现的图片轮播技术，通过 JavaScript 控制图片的透明度和显示效果，实现了平滑过渡和动态展示。此外，还提供了一个包含多个小预览图的导航栏，用户可以通过点击预览图来切换主图片。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动态flash效果</title>
<style type="text/css">
.ClassSubImg{FILTER: alpha(opacity=30);border:1pt solid #C1C3C0; cursor:hand;}
</style>
</head>

<body>
<table width="312" height="259" border="0" align="center">
<tr>
    <td width="508" height="279" valign="top"><table width="310" height="265" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="429" height="215" align="center" valign="bottom" bgcolor="#FF0000"><a href="/" id="flash_link" target="_blank"><img src="1.jpg" name="mainImg" width="311" height="209" border="0" id="mainImg" style="filter:blendTrans(duration=1)"></a></td>
      </tr>
      <tr>
        <td height="50" align="center">
  <div style="width:312px; overflow:hidden; margin:0px" id="flash_overflow">
  <table width="312" height="46" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center"><img src="5/1.jpg" width="56" height="38" class="ClassSubImg" id="sub1" onClick="SetMainImg(this);"></td>
            <td align="center"><img src="5/2.jpg" width="56" height="38" class="ClassSubImg" id="sub2" onClick="SetMainImg(this);"></td>
            <td align="center"><img src="5/3.jpg" width="56" height="38" class="ClassSubImg" id="sub3" onClick="SetMainImg(this);"></td>
            <td align="center"><img src="5/4.jpg" width="56" height="38" class="ClassSubImg" id="sub4" onClick="SetMainImg(this);"></td>
            <td align="center"><img src="5/5.jpg" width="56" height="38" class="ClassSubImg" id="sub5" onClick="SetMainImg(this);"></td>
          </tr>
        </table>
  </div>
  </td>
      </tr>
    </table></td>
</tr>
</table>
<script>
var BeginFilter=30;//初始滤镜值，要保持与ClassSubImg一致
var ChangeFilter=100;//清晰滤镜值
var BeginStyle="1pt solid #C1C3C0";//小图片初始风格，要保持与ClassSubImg一致
var ChangeStyle="1pt solid #F4972F";//小图片轮换风格
var BorderWidth=1*2;//图片的边框宽度*2
var ImgWidth=113;//图片的宽度
var CurrentImg=1;//当前显示的图片序数
var ClassAry=new Array("1","2","3","4","5");//图片链接地址
var Cnt=ClassAry.length;//图片总数
flash_link.href=ClassAry[CurrentImg-1];//初始化为第一张图片的地址
function SetMainImg(obj)
{

mainImg.filters.blendTrans.apply();
mainImg.src=obj.src;
  mainImg.filters.blendTrans.play();
for(i=1;i<=Cnt;i++)
{
  if(obj==document.getElementById("sub"+(i).toString()))
  {
   CurrentImg=i;
   flash_link.href=ClassAry[(CurrentImg-1)%Cnt];//a.innerHTML=CurrentImg;
   CurrentImg=CurrentImg%(Cnt+1);
  }
  document.getElementById("sub"+(i).toString()).style.border=BeginStyle;
  document.getElementById("sub"+(i).toString()).filters.alpha.opacity=BeginFilter;
}
obj.style.border=ChangeStyle;
obj.filters.alpha.opacity=ChangeFilter;
}
function SetMainImgAll()
{
flash_link.href=ClassAry[(CurrentImg-1)%Cnt];
    CurrentImg=CurrentImg%(Cnt+1);
if(CurrentImg==0)CurrentImg=1;//a.innerHTML=CurrentImg;
obj=document.getElementById("sub"+(CurrentImg).toString());
mainImg.filters.blendTrans.apply();
mainImg.src=obj.src;
mainImg.filters.blendTrans.play();
for(i=0;i<Cnt;i++)
{
  document.getElementById("sub"+(i+1).toString()).style.border=BeginStyle;
  document.getElementById("sub"+(i+1).toString()).filters.alpha.opacity=BeginFilter;
}
obj.style.border=ChangeStyle;
obj.filters.alpha.opacity=ChangeFilter;
CurrentImg+=1;
if((BorderWidth+ImgWidth)*CurrentImg>flash_overflow.offsetWidth)//当轮询到不能显示的图片时，移动div以显示其他图片
  flash_overflow.scrollLeft+=(BorderWidth+ImgWidth);
else
  flash_overflow.scrollLeft=0;
}
setInterval("SetMainImgAll()",3000);
</script>
<span id="a"></span>

</body>
</html>