Question

我希望借助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>

Answer 1

Here's an easier solution

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

<div class="fadein">
    <div id="rotatingImage1"></div>
    <div id="rotatingImage2"></div>
    <div id="rotatingImage3"></div>
</div>

CSS

#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;}

将三张图片叠加在一起

1 个答案: