Question

所以我找到了这个很酷的JQuery推子，它完全符合我的要求。背景消失，但是当从图像到图像的转换发生时，我所有其他div都隐藏然后基本显示。

我想这样做只有背景图片才会褪色，而且div基本上不会闪烁。如果需要，我可以制作一段短视频。

HTML和JQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    function fader() {
        $("img").first().appendTo('#wrap').fadeOut(3000);
        $("img").first().fadeIn(3000);      
        setTimeout(fader, 4200);
    }
    </script>
</head>
<body onLoad="fader();">
    <div id="wrap">
        <img src="images/Blue.png">
        <img src="images/Green.png">
        <img src="images/Orange.png">
        <img src="images/Pink.png">
        <img src="images/Purple.png">
        <img src="images/Red.png">
        <img src="images/Yellow.png">

        <div id="wrapper">
            <div id="header">
                <div id="sv_title">Title</div>
                <div id="sv_subtitle">Subtitle</div>
            </div>

            <div id="content_left">
                <div id="text">
                    Lorem ipsum
                </div>
            </div>

            <div id="content_right">
                <div id="text">
                    Lorem ipsum 
                </div>
            </div>  

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

        </div>
    </div>
</body>

CSS：

html { overflow-x: hidden; overflow-y: hidden; }

img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}

body{
margin: 0;
padding: 0;
}

#wrap { 
margin: 0;
padding: 0;
}

/* End Setup */
/* Detail */

#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
} 

#header { 
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7; 
}

#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}

#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}

#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}

Answer 1

这应该做的工作：

function fader() {
    $("#background img:first").appendTo('#background').fadeOut(3000);
    $("#background img:first").fadeIn(3000);
    setTimeout(fader, 4200);
}

和html中的修复

<div id="wrap">
    <span id="background">
        <img src="images/Blue.png">
        <img src="images/Green.png">
        <img src="images/Orange.png">
        <img src="images/Pink.png">
        <img src="images/Purple.png">
        <img src="images/Red.png">
        <img src="images/Yellow.png">
    </span>

    <div id="wrapper">
    <!-- and the rest of the markup -->

它没有经过测试，我现在懒得创造一个小提琴并嘲笑你的图像。

推子不同于Div

1 个答案: