Einblenden/Ausblenden von Hintergrundbildern ohne weißen Hintergrund

Ich möchte eine Website mit Hintergrundbildern erstellen, die sich im Laufe der Zeit mit einem Ein-/Ausblendeffekt ändern, aber ich möchte die vorhandene jQuery-Ein-/Ausblendung nicht verwenden out-Effekt, weil mit, wenn ein Bild ausgeblendet wurde, erschien ein weißer Hintergrund vor anderen Bild eingeblendet. Ich fand ein Plugin mit dem Namen Maximage, die meine Anfrage passt, aber es verwendet Img-Tags, während ich mit Hintergrund-Bild-CSS arbeiten möchte (Ich habe eine gute Grund dafür). Weiß jemand, wie man das macht?Einblenden/Ausblenden von Hintergrundbildern ohne weißen Hintergrund

Hier ist mein HTML-Code:

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

Hier ist mein JavaScript-Code so weit:

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

Beispiel: http://www.aaronvanderzwan.com/maximage/examples/basic.html

Quelle

2015-04-20 Lee

Können Sie bitte ein Arbeits jsfiddle zur Verfügung stellen? –

Fragen Sie nur, wie Sie zwei Elemente überblenden und nicht dasselbe Element ausblenden, den Hintergrund ändern und wieder einblenden? – adeneo

AHH! Endlich ! Ich habe eine schöne Technik gefunden! Ich benutze eine Doppelhülle.

Das Problem in Ihrem Code ist ein bisschen logisch. Sie können nicht fadeOut und fadeIn gleichzeitig ein einzelnes Wrapper.

Die Idee ist also, zwei Wrapper zu erstellen und zwischen ihnen hin und her zu wechseln. Wir haben einen Wrapper namens: "wrapper_top", der den zweiten Wrapper einkapselt: "wrapper_bottom". Und die Magie war, neben den zweiten Umschlag zu setzen: deinen Inhalt.

mit So ist die Struktur bereit, welche ist die folgende:

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

Dann ein bisschen von JS + CSS und voilà! Es wird dynamisch mit einer beliebigen Anzahl von Bildern sein !!! Hier

ist die Umsetzung: http://jsbin.com/wisofeqetu/1/

Quelle

2015-04-20 17:04:28 Kursion

danke, du hast mich gerettet – Lee

Wenn es nicht Hintergrund-Bild muss sein, Sie kann alle Bilder in Ihrem #wrapper, in <img> platzieren, wird es wie ein Charme funktionieren:

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

dann etwas Stil. Jedes Bild hat in gleicher Stelle zu sein, also Position relativ zu addieren #wrapper, und die Position absolut .imageClass:

#wrapper{ 
    position: relative; 
} 

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

display: none; wird jedes Bild ausblenden.

Jetzt einige JQuery. Zum ersten Bild angezeigt, wenn Fenster Last schreiben:

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

vom .EQ() „Befehl“ können Sie festlegen, welche ein Element mit der Klasse‘.imageClass' Sie genau verwenden möchten. Beginnt mit 0. Danach einfach so etwas tun:

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

Das sollte funktionieren, hoffe, Sie werden es mögen.

Quelle

2015-04-20 14:30:47 Luke

Vielen Dank, aber ich muss Hintergrundbild anstelle von Bild-Tag verwenden, weil ich in der Wrapper, andere Plugin, die nur perfekt mit Wrapper-Hintergrundbild laufen kann. Auf der anderen Seite, fadeIn und fadeOut Funktion von jquery passt nicht zur Anfrage meines Mentors. Er möchte so etwas wie: http://www.aaronvanderzwan.com/maximage/examples/basic.html (kein weißer Blitz nach fadeOut) – Lee

Minus 1, weil Sie nicht die Anforderung respektieren :(Ich war auch für diese Lösung aber mit der CSS-Eigenschaft background-image ist ein bisschen komplizierter. Aber Ihr Code ist nett. So traurig, eine -1 zu einer guten Antwort so zu setzen ... leider ist es Off-Thema :( – Kursion

Sorry, ich habe nicht -1 zu dir, das ist jemand anderes – 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>

Quelle

2015-07-09 09:48:58 CYRIL

Einblenden/Ausblenden von Hintergrundbildern ohne weißen Hintergrund

Antwort

Verwandte Themen