Zanikanie/zanikanie obrazów tła bez białego tła

Chcę utworzyć witrynę z obrazami tła, które zmieniają się z czasem dzięki efektowi zanikania/zanikania, ale nie chcę używać istniejącego jQuery fade in/fade Efekt out, ponieważ gdy zniknął jeden obraz, pojawiło się białe tło, zanim zniknął inny obraz. Znalazłem wtyczkę o nazwie Maximage, która pasuje do mojej prośby, ale używa znaczników img, podczas gdy chcę pracować z CSS w tle obrazu (mam dobry powód do tego). Czy ktoś wie, jak to zrobić?Zanikanie/zanikanie obrazów tła bez białego tła

Oto mój kod HTML:

<div id="wrapper"> 
//My contain here 
</div>

Oto mój kod JavaScript do tej pory:

//Auto change Background Image over time 
$(window).load(function() { 
    var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg']; 
    var i = 0; 

    function changeBackground() { 
     $('#wrapper').fadeOut(500, function(){ 
      $('#wrapper').css('background-image', function() { 
      if (i >= images.length) { 
        i = 0; 
       } 

       return 'url(' + images[i++] + ')'; 
      }); 
      $('#wrapper').fadeIn(500); 
     })  
    } 
    changeBackground(); 
    setInterval(changeBackground, 3000); 
});

Przykład: http://www.aaronvanderzwan.com/maximage/examples/basic.html

Źródło

2015-04-20 Lee

Czy możesz zapewnić jsfiddle działa? –

Po prostu pytasz, jak przeniknąć dwa elementy, a nie zniknąć z tego samego elementu, zmienić tło i zaniknąć z powrotem? – adeneo

AHH! Wreszcie ! Znalazłem fajną technikę! Używam podwójnego opakowania.

Problem w twoim kodzie jest trochę logiczny. Nie można fadeOut i fadeIn w tym samym czasie pojedynczego opakowania.

Chodzi o to, aby utworzyć dwie owijki i przełączać się między nimi. Mamy jedno opakowanie o nazwie: "wrapper_top", które zawiera drugi wrapper o nazwie: "wrapper_bottom". A magia miała być umieszczona obok drugiego opakowania: zawartość.

Zatem mając struktura gotowa który jest następujący:

<div id='wrapper_top'> 
    <div id='content'>YOUR CONTENT</div> 
    <div id='wrapper_bottom'></div> 
</div>

Potem trochę JS + CSS i voila! Będzie dynamiczny z dowolną ilością obrazów !!!

Oto realizacja: http://jsbin.com/wisofeqetu/1/

Źródło

2015-04-20 17:04:28 Kursion

dzięki, uratowałeś mnie – Lee

Jeśli to nie musi być obraz tła, ty może umieścić wszystkie obrazy w twoim #wrapper, in <img>, zadziała jak urok:

<div id="wrapper"> 
    <img src="firstImage" class="imageClass"></img> 
    <img src="secoundImage" class="imageClass"></img> 
    <img src="thirdImage" class="imageClass"></img> 
</div>

to jakiś styl. Każdy obraz musi być w tym samym miejscu, więc dodać pozycję względem #wrapper i pozycję bezwzględnej .imageClass:

#wrapper{ 
    position: relative; 
} 

.imageClass{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}

display: none; ukryje każdy obraz.

Teraz niektóre JQuery. Pojawiać się pierwsze zdjęcie, gdy obciążenie okno napisać to:

$(window).load(function() { 
    $('.imageClass').eq(0).show(); 
});

przez .eq() „polecenie” można określić, który jeden element z klasą”.imageClass' chcesz dokładnie użyć. Zaczyna się z 0. Po prostu zrób coś takiego:

function changeBackground() { 
    var current = 0; 
    //tells which image is currently shown 
    if(current<$('.imageClass').length){ 
     //loop that will show first image again after it will show the last one 
     $('.imageClass').eq(current).fadeOut(500); 
     current++; 
     $('.imageClass').eq(current).fadeIn(500); 
    } else { 
     $('.imageClass').eq(current).fadeOut(500); 
     current=0; 
     $('.imageClass').eq(current).fadeIn(500); 
    } 
} 
    changeBackground(); 
    setInterval(changeBackground, 3000); 
});

To powinno zadziałać, mam nadzieję, że ci się spodoba.

Źródło

2015-04-20 14:30:47 Luke

Dziękuję, ale muszę użyć back ground image zamiast tagu obrazu, ponieważ w opakowaniu używam innej wtyczki, która może działać doskonale tylko z opakowaniem obrazu tła. Z drugiej strony funkcja fadeIn i fadeOut jquery nie pasuje do zapytania mojego mentora. On chce czegoś takiego: http://www.aaronvanderzwan.com/maximage/examples/basic.html (brak białego flasha po fadeOut) – Lee

Minus 1, ponieważ nie szanujesz wymogu :(Ja też wybierałem to rozwiązanie, ale za pomocą właściwości css obraz w tle jest nieco bardziej skomplikowany, ale twój kod jest miły, tak smutny, że daje -1 na dobrą odpowiedź w ten sposób ... niestety jest to temat nietypowy :( – Kursion

Przepraszam, że nie wstawiłem -1 dla ciebie, to jest ktoś inny – Lee

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(window).load(function() {   
    var i =0; 
    var images = ['image2.png','image3.png','image1.png']; 
    var image = $('#slideit'); 
       //Initial Background image setup 
    image.css('background-image', 'url(image1.png)'); 
       //Change image at regular intervals 
    setInterval(function(){ 
    image.fadeOut(1000, function() { 
    image.css('background-image', 'url(' + images [i++] +')'); 
    image.fadeIn(1000); 
    }); 
    if(i == images.length) 
    i = 0; 
    }, 5000);    
}); 
</script> 
</head> 
<body> 
     <div id="slideit" style="width:700px;height:391px;"> 
     </div> 
</body> 
</html>

Źródło

2015-07-09 09:48:58 CYRIL

Zanikanie/zanikanie obrazów tła bez białego tła

Odpowiedz

Powiązane problemy