Question

我在页面上添加了一些图像以淡入淡出，但转换之间有一个跳跃。非常感谢。

当我添加：

position: absolute;到#carousel，图片浮在左边，页面正文向上移动，内容变得不可见。
position: absolute;到.images {}，页面正文向上移动，内容变得不可见。
position: absolute;到#carousel和.images {}虽然跳跃消失的图像向左浮动，但页面正文向上移动，内容变得不可见。

由于

JS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function ()
            {
                var showing_default = true;
                var did_scroll = false;

                $(window).on("scroll", function (e)
                {
                    did_scroll = true;
                });

                window.setInterval(function ()
                {
                    if (did_scroll)
                    {
                        did_scroll = false;

                        if (showing_default && $(document).scrollTop() >= 100)
                        {
                            showing_default = false;
                            $("#header_container").css('position', 'fixed');
                            $("#default").stop().hide();
                            $("#sticky").fadeIn(500);
                        }
                        else if (! showing_default && $(document).scrollTop() < 100)
                        {
                            showing_default = true;
                            $("#sticky").stop().hide();
                            $("#default").fadeIn(500);
                            $("#header_container").css('position', 'fixed');
                        }
                    }
                }, 250);
            });

            $(document).ready(function()
            {
                var timeout_id;

                var slide_image = function(step)
                {
                    if (step == undefined) step = 1;

                    clearTimeout(timeout_id);

                    var indx = $('.image:visible').index('.image');

                    if (step != 0)
                    {
                        $('.image:visible').fadeOut();
                    }

                    indx = indx + step;

                    if (indx >= $('.image').length)
                    {
                        indx = 0;
                    }
                    else if (indx < 0)
                    {
                        indx = $('.image').length - 1;
                    }

                    if (step != 0)
                    {
                        $('.image:eq(' + indx + ')').fadeIn();
                    }

                    timeout_id = setTimeout(slide_image, 1000);
                };

                slide_image(0);
            });
        </script>

CSS

<style type="text/css">
            /* --- COMMON ---------------------------------------------- */
            *
            {
                margin: 0px;
                padding: 0px;
            }
            /* --- HEADER ---------------------------------------------- */
            #header_container
            {
                display: block;
                z-index: 100;
                position: fixed;
                top: 0px;
                width: 100%;
                background: #EEEEEE;
                -moz-box-shadow: 0 -2px 5px 5px #B8B8B8;
                -webkit-box-shadow: 0 -2px 5px 5px #B8B8B8;
                box-shadow: 0 -2px 5px 5px #B8B8B8;
            }
            #default
            {
                display: block;
                margin: auto;
                width: 900px;
                height: 100px;
            }
            #sticky
            {
                display: none;
                margin: auto;
                width: 900px;
                height: 50px;
            }
            /* --- CAROUSEL -------------------------------------------- */
            #carousel_container
            {
                display: block;
                margin-top: 105px;
                width: 100%;
                background: #FFFFFF;
            }
            #carousel
            {
                display: block;
                margin: auto;
                width: 900px;
            }
            .image
            {
                display: none;
                width: 900px;
                height: 400px;
            }
            .first
            {
                display: block;
            }
            /* --- BODY ------------------------------------------------ */
            #body_container
            {
                display: block;
                background: #EEEEEE;
            }
            #body
            {
                display: block;
                margin: auto;
                width: 900px;
            }
            /* --- FOOTER ---------------------------------------------- */
            #footer_container
            {
                display: block;
                background: #DBDBDB;
            }
            #footer
            {
                display: block;
                margin: auto;
                width: 900px;
            }
        </style>

HTML

默认标题 STICKY HEADER

    <div id="carousel_container">
        <div id="carousel">
            <div class="image first"><img src="images/1.jpg" width="900px" height="400px" alt="" /></div>
            <div class="image"><img src="images/2.jpg" width="900px" height="400px" alt="" /></div>
            <div class="image"><img src="images/3.jpg" width="900px" height="400px" alt="" /></div>
            <div class="image"><img src="images/4.jpg" width="900px" height="400px" alt="" /></div>
            <div class="image"><img src="images/5.jpg" width="900px" height="400px" alt="" /></div>
        </div>
    </div>

    <div id="body_container">
        <div id="body">
            TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM
        </div>
    </div>

    <div id="footer_container">
        <div id="footer">FOOTER</div>
    </div>

Answer 1

添加到CSS

#carousel{
    height:400px;
}

.image
{
   position: absolute;
}

使用jQuery在图像转换之间跳转

1 个答案: