Slideshow com fade

[viniciusjau 2]

Fala galera.
Estou tentando dar um fade em um slideshow que possuo.
alguém consegue dar um dica de como posso fazer isso? Segue meu codigo abaixo:

 

<script type="text/javascript">
<!--
var imageCount = 0;
var currentImage = 0;
var images = new Array();

images[0] = 'images/01.jpg';
images[1] = 'images/02.jpg';
images[2] = 'images/03.jpg';
images[3] = 'images/04.jpg';
images[4] = 'images/05.jpg';
images[5] = 'images/06.jpg';
images[6] = 'images/07.jpg';
var preLoadImages = new Array();
for (var i = 0; i < images.length; i++)
{
   if (images[i] == "")
      break;

   preLoadImages[i] = new Image();
   preLoadImages[i].src = images[i];
   imageCount++;
}
   
function startSlideShow()
{
   if (document.body && imageCount > 0)
   {
      document.body.style.backgroundImage = "url("+images[currentImage]+")";    
      document.body.style.backgroundAttachment = "fixed";
      document.body.style.backgroundRepeat = "repeat";
      document.body.style.backgroundPosition = "center";
   
      currentImage = currentImage + 1;
      if (currentImage > (imageCount-1))
      { 
         currentImage = 0;
      }
      setTimeout('startSlideShow()', 9000);
   }
}
startSlideShow();
//-->
</script>

Com esse meu codigo as imagens ficam mudando porém sem um efeito entre elas.
abs

[William Bruno 1501]

fade é uma transição suave da propriedade css opacity.

 

vc pode usar css3 ? se puder, será trivial fazer, se não precisa implementar uma alteração gradativa dessa propriedade com um setInterval por exemplo.

[viniciusjau 2]

Posso usar css3 sim.
POde me dar um exmplo ?

[William Bruno 1501]

fiz aqui um exemplo rápido. Note que o único trabalho do js, é adicionar uma class. Todo o fade é por conta do css.

<img src="http://www.clipartsegifs.com.br/cliparts/variados/garfield/garfield_02.jpg" id="img-fade" />
<button id="btn-fade">FadeOut</button>

<style>
#img-fade { transition: 2s; }
.fade-out { opacity: 0; }
.fade-in { opacity: 1; }
</style>

<script>
var id = function(el) {
	return document.getElementById( el );
}
var $btn = id('btn-fade'),
	$img = id('img-fade');

$btn.onclick = function(){
	var $this = this;


	if( $img.className ==='fade-out' ){
		$img.className = 'fade-in';
		$this.innerHTML = 'FadeOut';
	} else {
		$img.className = 'fade-out';
		$this.innerHTML = 'FadeIn';
	}
}
</script>

[Natan Almeida Soares 0]

<script>

$(document).ready(function(){

$('.slide').bxSlider({ <<<<<<<<<<<<<<<<< Meu Slide ta definido no CSS

auto: true, <<<<<<<<<<<<<<<<<< Ta automático....

mode: 'fade', <<<<<<<<<<<<<<<<<< Aqui você coloca a função FADE!

pause: 1000,

speed: 4000

});

$('.bx-controls-direction a').addClass("sprite");

});

</script>

No seu caso ficará
##################################################################################

setTimeout('startSlideShow()', 9000); } }

startSlideShow({           <<< Note que no caso anterior ele estava "starSliceShow( )"  

auto: true,

mode: 'fade',

pause: 1000,

speed: 4000 });

##########################################################################################

[viniciusjau 2]

Legal...
Estou fazendo uns testes pra rolar legal no IE

posto aqui depois....