图片渐隐更替代码,Css代码库,德仔网

代码语言

代码分类

【Css】图片渐隐更替

作者:温暖的小明 / 发布于2016/2/22/ 519

<!doctype>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="picture.css">
    <script type="text/javascript" src="roll.js"></script>
</head>
<body onload="rolls()">
    <div>
        <img id="imgg" src="">
    </div>
    图片滚动
</body>
</html>


roll.js 
var i=0;
function show(){
    document.getElementById('imgg').style.opacity=1;
    var opa=document.getElementById('imgg').style.opacity;
    var t0=setTimeout(function(){document.getElementById('imgg').style.opacity=0.9;},200);
    if (opa==0.9) {clearTimeout(t0);};
    var t1=setTimeout(function(){document.getElementById('imgg').style.opacity=0.8;},400);
    if (opa==0.8) {clearTimeout(t1);};
    var t2=setTimeout(function(){document.getElementById('imgg').style.opacity=0.7;},600);
    if (opa==0.7) {clearTimeout(t1);};  
    var t3=setTimeout(function(){document.getElementById('imgg').style.opacity=0.6;},800);
    if (opa==0.6) {clearTimeout(t3);};
    var t4=setTimeout(function(){document.getElementById('imgg').style.opacity=0.5;},1000);
    if (opa==0.5) {clearTimeout(t4);};
    var t5=setTimeout(function(){document.getElementById('imgg').style.opacity=0.4;},1200);
    if (opa==0.4) {clearTimeout(t5);};
    var t6=setTimeout(function(){document.getElementById('imgg').style.opacity=0.3;},1400);
    if (opa==0.3) {clearTimeout(t6);};
    var t7=setTimeout(function(){document.getElementById('imgg').style.opacity=0.2;},1600);
    if (opa==0.2) {clearTimeout(t7);};
    var t8=setTimeout(function(){document.getElementById('imgg').style.opacity=0.1;},1800);
    if (opa==0.1) {clearTimeout(t8);};
}
 
function rolls(){
    var addr="img\/0";
    if(i<0 || i>=4)
        i=1;
    else
        i++;
    addr=addr+i+".jpg"
    document.getElementById('imgg').style.opacity=1;
    document.getElementById('imgg').src=addr;
    show();
    var t=setTimeout(rolls,2000);   
}



picture.css 
div,body{margin: 0 auto;padding: 0;text-align: center;}

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　图片渐隐　

同语言下

可能有用的

温暖的小明贡献的其它代码(2)