图片自动切换（没有过渡效果）

最新推荐文章于 2023-12-17 20:26:26 发布

我是高手高手高高手

最新推荐文章于 2023-12-17 20:26:26 发布

阅读量607

点赞数

分类专栏： JS技巧

本文链接：https://blog.csdn.net/haibo0668/article/details/51565783

版权

JS技巧专栏收录该内容

244 篇文章 3 订阅

订阅专栏

//修改图片的宽度、高度，注意要和下面的一样，修改显示位置
<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 + '%';
    }
}
}
οnlοad=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>