Javascript 使用jQuery在图像转换之间跳跃_Javascript_Jquery_Html_Css

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

javascript jquery html css

Javascript 使用jQuery在图像转换之间跳跃,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在我的页面中添加了一些淡入淡出的图像，但是在过渡之间有一个跳跃。非常感谢你的帮助当我加上：位置：绝对位置至#转盘，图像向左浮动，页面正文向上移动，内容变得不可见位置：绝对位置到.images{}，页面主体向上移动，内容变得不可见位置：绝对位置到#carousel和.images{}虽然跳跃消失图像向左浮动，但页面正文向上移动，内容不可见谢谢 JS <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/

我在我的页面中添加了一些淡入淡出的图像，但是在过渡之间有一个跳跃。非常感谢你的帮助

当我加上：

位置：绝对位置至#转盘，图像向左浮动，页面正文
向上移动，内容变得不可见


位置：绝对位置
到.images{}
，页面主体向上移动，内容变得不可见
位置：绝对位置
到#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>

<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>


$（文档）.ready（函数（）
{
var显示默认值=真；
var did_scroll=false；
$（窗口）。打开（“滚动”，功能（e）
{
did_scroll=true；
});
window.setInterval（函数（）
{
如果（是否滚动）
{
did_scroll=false；
if（显示默认值&&$（document）.scrollTop（）>=100）
{
显示默认值=false；
$（“#header_container”）.css（'position'，'fixed'）；
$（“#默认值”）.stop（）.hide（）；
$（“#粘性”）.fadeIn（500）；
}
如果（！showing_default&&$（document）.scrollTop（）<100）则为else
{
显示默认值=真；
$（“#粘性”）.stop（）.hide（）；
$（“#默认值”）.fadeIn（500）；
$（“#header_container”）.css（'position'，'fixed'）；
}
}
}, 250);
});
$（文档）.ready（函数（）
{
变量超时时间；
var slide_image=函数（步骤）
{
如果（步骤==未定义）步骤=1；
clearTimeout（超时\u id）；
var indx=$（'.image:visible'）。索引（'.image'）；
如果（步骤！=0）
{
$（'.image:visible'）.fadeOut（）；
}
indx=indx+阶跃；
if（indx>=$（'.image'）.length）
{
indx=0；
}
else if（indx<0）
{
indx=$（'.image'）。长度-1；
}
如果（步骤！=0）
{
$（'.image:eq（'+indx+'））.fadeIn（）；
}
timeout\u id=setTimeout（幻灯片图像，1000）；
};
幻灯片图像（0）；
});

CSS
<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>

<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>


/*---普通-------------------------------------------*/
*
{
边际：0px；
填充：0px；
}
/*---标题-------------------------------------------*/
    <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>

#集箱
{
显示：块；
z指数：100；
位置：固定；
顶部：0px；
宽度：100%；
背景：#EEEEEE；
-莫兹盒阴影：0-2px5px5px#B8B8B8；
-网络工具包盒阴影：0-2px 5px 5px#B8B8B8；
盒影：0-2px 5px 5px#B8B8B8；
}
#违约
{
显示：块；
保证金：自动；
宽度：900px；
高度：100px；
}
#粘的
{
显示：无；
保证金：自动；
宽度：900px；
高度：50px；
}
/*---旋转木马-------------------------------------------*/
#转盘式集装箱
{
显示：块；
边缘顶部：105px；
宽度：100%；
背景：#FFFFFF；
}
#旋转木马
{
显示：块；
保证金：自动；
宽度：900px；
}
.形象
{
显示：无；
宽度：900px；
高度：400px；
}
.首先
{
显示：块；
}
/*---正文-------------------------------------------*/
#车身集装箱
{
显示：块；
背景：#EEEEEE；
}
#身体
{
显示：块；
保证金：自动；
宽度：900px；
}
/*---页脚-------------------------------------------*/
#页脚容器
{
显示：块；
背景：#dbdb；
}
#页脚
{
显示：块；
保证金：自动；
宽度：900px；
}

HTML
默认标题
    <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>

粘头
    <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>


身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
/>主体
主体
主体
底部