Javascript 将三个图像相互叠加_Javascript_Jquery_Html_Css

Javascript 将三个图像相互叠加

javascript jquery html css

Javascript 将三个图像相互叠加,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想借助jquery中的滑块在3幅图像之间产生淡入淡出效果。淡入淡出效果很好，但是所有的图像都是并排出现的，而不是一个接一个。我如何才能做到这一点 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Slider</title> <link rel="stylesheet" href

我想借助jquery中的滑块在3幅图像之间产生淡入淡出效果。淡入淡出效果很好，但是所有的图像都是并排出现的，而不是一个接一个。我如何才能做到这一点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#slider" ).slider({
        range: "min",
                 value: 10,
                 min: 0,
                 max: 20,

                 slide: function (event, ui) {
                     var r = (ui.value); 
                     $("#img1").css({'opacity':1-(r/10)});
                     $("#img2").css({'opacity':function(){
                                                if((r-10)<0) 
                                                    return r/10;
                                                else 
                                                return 1-((r-10)/10);
                                                }
                                                });
                    $("#img3").css({'opacity':(r/10)-1});
}   
    })
    });

    </script>
</head>
<body>
<div style="position:relative">
<img id = "img1" src = "img/face_1.png" style = "height:1024px; width:768px;z-index:1">
<img id = "img2" src = "img/face_2.1.png" style = "height:1024px; width:768px;z-index:2">
<img id = "img3" src = "img/face_3.jpg" style = "height:1024px; width:768px;z-index:3">
<div id="slider" style = "height:10px; width:200px" ></div>
</div>
</body>
</html>


jQueryUI滑块
$（函数（）{
$（“#滑块”）.滑块({
射程：“分钟”，
数值：10，
分:0,，
最高：20，
幻灯片：功能（事件、用户界面）{
var r=（ui.value）；
$（“#img1”）.css（{'opacity'：1-（r/10）}）；
$（“#img2”）.css（{'opacity'：function（）{
如果（（r-10）
JQuery
jQuery(document).ready(function(){ 
    $(function(){
        $('.fadein div:gt(0)').hide();
        setInterval(function(){
          $('.fadein :first-child').fadeOut(1000)
             .next('div').fadeIn(1000)
             .end().appendTo('.fadein');}, 
          2000);
    });
});

HTML
在实现此功能之前，您是否做过一些研究？CSS文件中有什么内容？z-index只对定位元素起作用，因此可能是。您在位置：relative中也有一个打字错误。这是由于相对定位
<div class="fadein">
    <div id="rotatingImage1"></div>
    <div id="rotatingImage2"></div>
    <div id="rotatingImage3"></div>
</div>

#rotatingImage1{background:url('http://lorempixel.com/500/501/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage2{background:url('http://lorempixel.com/500/502/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage3{background:url('http://lorempixel.com/500/503/') no-repeat;position:absolute;width:500px;height:500px;}