banner图片切换【Javascript】

图片轮播动画实现

最新推荐文章于 2025-09-12 14:04:02 发布

原创最新推荐文章于 2025-09-12 14:04:02 发布 · 627 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #class #filter #function #div

本文介绍了一种使用 JavaScript 和 HTML 实现图片轮播效果的方法。通过设定定时器自动切换显示不同的图片，并运用 IE 的滤镜效果平滑过渡，实现了动态的图片轮播动画。本文详细解释了代码的每一部分，包括如何控制图片的显示与隐藏。

<div id="oTransContainer" style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion='forward'); WIDTH: 655px; HEIGHT: 177px">
        <img class="pic" id="oDIV1" src="images/1.png" width="655" height="177px" alt=""/>
            <script type="text/javascript">
   var NowFrame = 1;
   var MaxFrame = 5;
   var bStart = 0;
   function fnToggle(){var next = NowFrame + 1;
   if(next == MaxFrame+1)
    {NowFrame = MaxFrame;next = 1;}
   if(bStart == 0)
    {bStart = 1;setTimeout('fnToggle()', 2000);return;}
   else
    {oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}} setTimeout('fnToggle()', 6000);}fnToggle();
             </script>

       <img class="pic" id="oDIV2" src="images/2.png" alt="" style="DISPLAY: none;"/>
       <img class="pic" id="oDIV3" src="images/3.png" alt="" style="DISPLAY: none;"/>
       <img class="pic"id="oDIV4" src="images/4.png" alt="" style="DISPLAY: none;"/>