JS series - SlideShow

Criar um efeitos que alteram as imagens de fundo da página de acordo com timer determinado...


piece of cake.. ;)

primeiro vamos ao arquivo js... Denominar o arquivo de external-efeito1.js

var imageCount = 0;

var currentImage = 0;
var images = new Array();


images[0] = 'img1.jpg';
images[1] = 'img2.jpg';
images[2] = 'img3.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 = "left top";
 
      currentImage = currentImage + 1;
      if (currentImage > (imageCount-1))
      {
         currentImage = 0;
      }
      setTimeout('startSlideShow()', 3000);
   }
}


e depois o html


<html>
<head>
<title>Agni Tech - JS series</title>
</head>
<body>
<script language="JavaScript" src="external-efeito1.js"></script>
<p align="center"> <b> div com formatação no html </b> </p>
<script>
   startSlideShow();
</script>
</body>
</html>

Comments

Post a Comment