Wie HTML/CSS Slideshow Hintergrund Fade machen?

Ich frage mich, wie Sie eine Hintergrund-Diashow in andere Fotos wie eine normale Diashow verblassen lassen. Ich habe viele Codes ausprobiert und muss noch erfolgreich sein.Wie HTML/CSS Slideshow Hintergrund Fade machen?

Jetzt habe ich einen Code, um den Hintergrund zu ändern verschiedene Fotos zu machen, die gut funktioniert, aber es nicht verblassen. Gibt es da noch etwas hinzuzufügen?

Hier ist der Code

<html> 
<head> 

<style> 


body{ 
/*Remove below line to make bgimage NOT fixed*/ 
background-attachment:fixed; 
background-repeat: no-repeat; 
background-size: cover; 
/*Use center center in place of 300 200 to center bg image*/ 
background-position: 0 0; background- 
} 
</style> 

<script language="JavaScript1.2"> 

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com) 
//For full source code, 100's more DHTML scripts, and TOS, 
//visit http://www.dynamicdrive.com 

//Specify background images to slide 
var bgslides=new Array() 
bgslides[0]="http://i892.photobucket.c… 

bgslides[1]="http://i892.photobucket.c… 

bgslides[2]="http://i892.photobucket.c… 

//Specify interval between slide (in miliseconds) 
var speed=2000 

//preload images 
var processed=new Array() 
for (i=0;i<bgslides.length;i++){ 
processed[i]=new Image() 
processed[i].src=bgslides[i] 
} 

var inc=-1 

function slideback(){ 
if (inc<bgslides.length-1) 
inc++ 
else 
inc=0 
document.body.background=processed[inc… 
} 

if (document.all||document.getElementById) 
window.onload=new Function('setInterval("slideback()",spee… 

</script> 

</head> 

</html>

Wenn Sie Vorschläge haben, bitte lassen Sie mich wissen. Außerdem bin ich nicht der Größte im Codieren und habe keine Ahnung von JavaScript, also bitte erklären Sie, was zu tun ist.

Quelle

2013-02-14 AJ Marshall

Ich würde lieber ein DIV für das Hintergrundbild verwenden und haben einen niedrigen z-Index-Wert für sie. Blättern Sie dann einfach mit jquery oder einer anderen Bibliothek durch die Bilder. Das ist aber nur eine Idee;) – itsols

Working example on jsFiddle.

Verwenden Sie stattdessen diesen Code: (beachten Sie, dass Sie jQuery, um diesen Code zu arbeiten, um zu laden, müssen)

HTML

<div class="fadein"> 
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
</div>

CSS

.fadein { 
    position:relative; 
    height:320px; 
    width:320px; 
} 

.fadein img { 
    position:absolute; 
    left:0; 
    top:0; 
}

JavaScript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('.fadein img:gt(0)').hide(); 

setInterval(function() { 
    $('.fadein :first-child').fadeOut() 
          .next('img') 
          .fadeIn() 
          .end() 
          .appendTo('.fadein'); 
}, 4000); // 4 seconds 
}); 
</script>

Quelle

2013-02-14 04:06:44

Hey danke, ich weiß nicht mal, wie ich jQuery schreiben soll. –

Alles, was Sie tun müssen, ist, diesen JavaScript-Block in den Code oben in Ihrer HTML-Seite einzubinden (ganz unten vor dem

Große Lösung htmled! obwohl Eine Frage: Wie kann ich kombinieren diese mit dynamischer Breite arbeiten (100%) der Bilder? Ich habe versucht, Ihre jsFiddle Aktualisierung, aber dann wird der Text hinter den Bildern platziert. Siehe http://jsfiddle.net/2kkHH/340/ – Publicus

-2

Innerhalb des Css:

Breite: 100%; Höhe: 100%; Position: fixiert;

Quelle

2015-05-05 20:44:57 tkd

Dies beantwortet die Frage nicht. – Kmeixner

Wie HTML/CSS Slideshow Hintergrund Fade machen?

Antwort

Verwandte Themen