注册 | 登陆

您的位置：阿里西西 > 网页特效 > 图像特效 > 详细内容

很漂亮的图片平滑切换效果

稿源：互联网 2022-06-20 02:43:34 点击： 2737 撤稿纠错

漂亮的图片切换效果，可自定义图片及背景色。

以下讨论的是和相关的很漂亮的图片平滑切换效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style type="text/css">
.woon{border:1px solid #fff;}
.wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);}
</style>
<script language="JavaScript" type="text/JavaScript">

</script>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<table width="400" border="0" align="center" cellPadding="0" cellSpacing="0" bgcolor="#FF6699">
    <tr>
      <td width="400" height="300" align="center">
        <div id="fc" style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:400px; HEIGHT:300px; border:1px solid #D85C8A">
          <div style="display:block"><A href="<#ZC_BLOG_HOST#>?cat=3" target=_blank><img onmouseover="clearAuto();" onmouseout="setAuto()" height="300" src="/image/1.jpg" width="400" border="0"></A></div>
        <div style="display: none"><a href="<#ZC_BLOG_HOST#>?cat=2" target="_blank"><img onmouseover="clearAuto();" onmouseout="setAuto()" height="300" src="/image/2.jpg" width="400" border="0"></a></div>
        <div style="display: none"><A href="<#ZC_BLOG_HOST#>?cat=1" target=_blank><img onmouseover="clearAuto();" onmouseout="setAuto()" height="300" src="/image/3.jpg" width="400" border="0"></A></div>
        <div style="display: none"><a href="<#ZC_BLOG_HOST#>?cat=4" target=_blank><img onmouseover="clearAuto();" onmouseout="setAuto()" height="300" src="/image/4.jpg" width="400" border="0"></a></div>
      </div></td>
    </tr>
    <tr>
      <td height="99" valign="top"> <table border="0" align="center" cellPadding="0" cellSpacing="1" id="num">
          <tr>
          <td class="woon" onmouseover=clearAuto();onclick=Mea(0); onmouseout=setAuto()><img src="/image/1.jpg" width="90" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('<#ZC_BLOG_HOST#>?cat=5','','')"></td>
       <td class="wooff" onmouseover=clearAuto(); onclick=Mea(1); onmouseout=setAuto()><img src="/image/2.jpg" width="90" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('<#ZC_BLOG_HOST#>?cat=6','','')"></td>
          <td class="wooff" onmouseover=clearAuto(); onclick=Mea(2); onmouseout=setAuto()><img src="/image/3.jpg" width="90" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('<#ZC_BLOG_HOST#>?cat=7','','')"></td>
          <td class="wooff" onmouseover=clearAuto(); onclick=Mea(3); onmouseout=setAuto()><img src="/image/4.jpg" width="90" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('<#ZC_BLOG_HOST#>?cat=8','','')"></td>
            </td>
          </tr>
      </table>
<script>
var n=0;
var showNum = document.getElementById("num");
function Mea(value){
 n=value;//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 setBg(value);
 plays(value);
 }
function setBg(value){
 for(var i=0;i<4;i++)
   if(value==i){
  showNum.getElementsByTagName("td")[i].className='woon';
  }
 else{
  showNum.getElementsByTagName("td")[i].className='wooff';
  }
 }
function plays(value){
 with (fc){
  filters[0].Apply();
  for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none";
  filters[0].play();
  }
}
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 5000)}
function auto(){
 n++;
 if(n>3)n=0;
 Mea(n);
}
function sub(){
 n--;
 if(n<0)n=3;
 Mea(n);
} //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
setAuto();
</script>
</body>
</html>

关于很漂亮的图片平滑切换效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016302762399.shtml方便下次再访问哦。

·上一篇： 图片向上循环滚动效果
·下一篇： 仿163首页顶部广告伸缩效果

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻