0

ここで、2 つの画像で画像スライダーを実行しようとしましたが、同じページを 2 つのタブで開いているとき、または Firefox を最小化して再度最大化すると、画像スライダーが点滅して正しく機能しません。hide クラスと show クラスは setTimeout メソッドを使用し、setTimeout メソッドも使用する fade クラス内に配置されます。

<html>
    <head>
        <style type="text/css">
            .image1 {
                height: 300;
                left: 181px;
                position: absolute;
                top: 103px;
                width: 300;
            }
        </style>
        <script type="text/javascript">
            var a = 1;
            var flg = 0,
                flg2 = 0;

            function fade() {
                setTimeout(function () {
                    if (flg2 == 0) {
                        hide();
                        flg2 = 1;
                        fade();
                    } else {
                        show();
                        flg2 = 0;
                        fade();
                    }
                }, 3000);

            }
            function hide() {
                document.getElementById("img1").style.opacity = a;
                document.getElementById("img2").style.opacity = (1 - a);
                if (a > 0) 
                    a = a - 0.1;
                else 
                    flg = 1;

                if (flg == 0) 
                    setTimeout(function () {
                        hide();
                    }, 50);
                else 
                    flg = 0;
                }
            function show() {
                document.getElementById("img1").style.opacity = a;
                document.getElementById("img2").style.opacity = (1 - a);
                if (a < 1.0) 
                    a = a + 0.1;
                else 
                    flg = 1;
                if (flg == 0) 
                    setTimeout(function () {
                        show();
                    }, 50);
                else 
                    flg = 0;
                }
        </script>
    </head>
    <body onload="fade()">
        <img class="image1" height="225" id="img1" src="img/image1.jpg" style="z-index:100" width="225"/>
        <img class="image1" height="225" id="img2" src="img/image2.jpg" style="z-index:1" width="225"/>
    </body>
</html>
4

1 に答える 1