Javascript 音量控制器不同于Div_Javascript_Jquery_Html_Css

Javascript 音量控制器不同于Div

javascript jquery html css

Javascript 音量控制器不同于Div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我找到了这个很酷的JQuery fader，它完全符合我的要求。背景淡入淡出，但当从一幅图像过渡到另一幅图像时，我所有的其他div基本上都隐藏然后显示我想这样做，只有背景图像会褪色，而div基本上不会闪烁。如果需要，我可以制作一个短视频 HTML和JQuery： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script

所以我找到了这个很酷的JQuery fader，它完全符合我的要求。背景淡入淡出，但当从一幅图像过渡到另一幅图像时，我所有的其他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>

这应该可以做到：

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

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

这将在+1时起作用。将

img

z-index

更改为-1也可以。{删除，因为我错了；无法删除注释}@Yass是的，但是你必须管理图像，递减的z-index和img是“第一”；每件事都有正反两面

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