0

在这里，我尝试使用两个图像来做图像滑块，但是当我在两个选项卡中打开同一页面时，或者如果我最小化 Firefox 并再次最大化，图像滑块会闪烁并且无法正常工作。隐藏和显示类使用 setTimeout 方法，它们被放置在也使用 setTimeout 方法的淡入淡出类中。

<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

0

我不确定这里的代码是否完全正确。看起来 setTimeout 的使用不正确。也许 setInterval 会更合适？

你愿意使用像 jQuery 这样的库吗？这会处理你的很多代码

//-- our global image references
var img1, img2;

//-- our global interval id, in case we need to stop/start animation 
//-- via clearInterval(intervalId)
var intervalId;

//-- start animation on document load
$(document).ready(function() {
    //-- set image references to appropiate image ids
    img1 = $('#img1');
    img2 = $('#img2');

    //-- start animation loop
    intervalId = setInterval(function() {
        //-- using jquery's :visible check show/hide appropriately 
        if (img1.is(':visible')) {
            img1.fadeOut();
            img2.fadeIn();
        } else {
            img1.fadeIn();
            img2.fadeOut();
        }
    }, 3000);
});

jsFiddle：http: //jsfiddle.net/dboots/3AenB

于 2013-10-29T18:02:12.763 回答