Come rendere sfumato lo slideshow di sfondo HTML/CSS?

Mi stavo chiedendo come si fa a far sì che una presentazione in background si dissolva in altre foto come una normale presentazione. Ho provato molti codici e devo ancora avere successo.Come rendere sfumato lo slideshow di sfondo HTML/CSS?

Ora, ho un codice per far cambiare lo sfondo a foto diverse che funzionano bene, ma non sbiadiscono. C'è comunque da aggiungere questo?

Ecco il codice

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

Se avete qualche suggerimento per favore fatemelo sapere. Inoltre, non sono il più bravo nella codifica e non ho la minima idea di JavaScript, quindi per favore spiega cosa fare.

fonte

2013-02-14 AJ Marshall

Preferisco utilizzare un DIV per l'immagine di sfondo e avere un valore z-index basso per esso. Quindi basta scorrere le immagini usando jquery o qualsiasi altra libreria. Comunque è solo un'idea;) – itsols

Working example on jsFiddle.

Usa questo codice invece: (si noti che è necessario caricare jQuery in modo che questo codice per lavorare)

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>

fonte

2013-02-14 04:06:44

Hey, grazie, non so nemmeno come wright jQuery. –

Tutto quello che devi fare è includere quel blocco di JavaScript nel codice qui sopra nella tua pagina HTML (in basso prima di

Ottima soluzione htmled! Una domanda però: come posso combinare questo per lavorare con larghezza dinamica (100%) delle immagini? Ho provato ad aggiornare il tuo jsFiddle, ma poi il testo è posizionato dietro le immagini. Vedere http://jsfiddle.net/2kkHH/340/ – Publicus

-2

All'interno del Css:

width: 100%; altezza: 100%; posizione: fissa;

fonte

2015-05-05 20:44:57 tkd

Questo non risponde alla domanda. – Kmeixner

Come rendere sfumato lo slideshow di sfondo HTML/CSS?

risposta

Problemi correlati