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

 

//修改图片的宽度、高度,注意要和下面的一样,修改显示位置
<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>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haibo0668/article/details/51565783
个人分类: JS技巧
上一篇自由浮动的多幅图像
下一篇箭头控制横向滚动图片
想对作者说点什么? 我来说一句

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

2013年03月05日 191KB 下载

flash as3.0 图片随机过渡效果

2011年12月23日 560KB 下载

自动切换图片

2017年10月01日 36KB 下载

jquery图片过渡效果

2012年06月06日 270KB 下载

Flash+Js焦点图切换效果

2013年11月15日 318KB 下载

banner图片JS.zip

2015年04月24日 155KB 下载

没有更多推荐了,返回首页

关闭
关闭