добавление трех изображений друг другу

-2

Я хочу иметь эффект затухания между 3 изображениями с помощью слайдера в jquery. затухание работает нормально, но все изображения идут бок о бок, а не поверх другого. Как я могу это достичь?добавление трех изображений друг другу

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

источник

2013-11-18 anuran mohanty

У вас сделал некоторые исследования перед реализацией этого? –

Что в вашем файле CSS? z-index работает только на позиционированных элементах, так что, возможно, это так. У вас также есть опечатка в 'position: relatiive'. – j08691

thanx это было связано с относительным позиционированием –

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

источник

2013-11-18 04:23:43

добавление трех изображений друг другу

ответ

Смежные вопросы