图片自动切换(没有过渡效果)

原创 2016年06月02日 12:49:49
 

//修改图片的宽度、高度,注意要和下面的一样,修改显示位置
<style type="text/css">
#img1 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:2}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var ie5=(document.getElementByIdx && document.all);
var ns6=(document.getElementByIdx && !document.all);

nPlus = 5   //the % of fading for each step
speed = 50  //速度

// You don't have to edit below this line
nOpac = 100
function FadeImg(){
    if(document.getElementByIdx){
        document.getElementByIdx('img1').style.visibility="visible";
        imgs = document.getElementByIdx('img2');
 opacity = nOpac+nPlus;
 nOpac = opacity;
 setTimeout('FadeImg()',speed);
    if(opacity>100 || opacity<0){
        nPlus=-nPlus;
    }
    if(ie5){
        imgs.style.filter="alpha(opacity=0)";
 imgs.filters.alpha.opacity = opacity;
    }
    if(ns6){
        imgs.style.MozOpacity = 0 + '%';
 imgs.style.MozOpacity = opacity + '%';
    }
  }
}
onload=FadeImg;
//  End -->
</script>
<div id="img1">
  <img src="017s.jpg" border=0 width=140 height=105>
</div>
<div id="img2">
  <img src="013s.jpg" border=0 width=140 height=105>
</div>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

图片自动切换(带过渡效果)

  • 2013年03月05日 15:26
  • 191KB
  • 下载

JS图片banner自动切换效果代码

  • 2012年03月23日 16:03
  • 385KB
  • 下载

iOS启动页面多张图片自动切换(带动画效果)

在AppDelegate.m中首先封装一段利用CATransition设置动画的代码- (void) transitionWithType:(NSString *) type WithSubtype:...
  • zl_kris
  • zl_kris
  • 2016年08月15日 22:52
  • 239

JS图片滤镜 焦点图片自动切换显示效果丨芯晴网页特效

JS图片滤镜 焦点图片自动切换显示效果丨芯晴网页特效丨CsrCode.Cn .30pt{color:#ce288c;font-size:30pt}// 属性设置var E_strIFaderTrans...

图片自动切换/幻灯片切换效果

  • 2011年01月03日 17:37
  • 42KB
  • 下载

WP之Button按下时切换过渡效果图片

做项目时遇到个功能,button按下时(按下未松手时)要切换到相应的效果过渡图。 解决方案 1.在设计器里右键Button,选择“编辑模板”->“编辑副本”.然后VS会自动在xaml文件头部加上b...

flash图片切换过渡效果

  • 2010年01月07日 11:46
  • 606KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片自动切换(没有过渡效果)
举报原因:
原因补充:

(最多只允许输入30个字)