Crear animación de imágenes pero de fondo de la pagina
Buenas Tardes,
Tengo problemas para implementar una animación de imágenes pero de fondo he logrado colocar 4 números (1, 2, 3 y 4) cuando le doy clic a cada número el fondo cambia pero los que deseo es que cada cierto tiempo (8 segundo) cambie solo, para mas detalle pueden ver la muestra en el siguiente link: <a>http://www.ingenniadigital.com/hanasalonyspa/#!/</a>
También copio el código, en la parte fina (sección footer)
Espero me puedan ayudar
Saludos,
Miguel
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Ubuntu_400.font.js"></script>
<script type="text/javascript" src="js/Ubuntu_700.font.js"></script>
<script type="text/javascript" src="js/bgSlider.js" ></script>
<script type="text/javascript" src="js/script.js" ></script>
<script type="text/javascript" src="js/pages.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/bg.js" ></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<div style='clear:both;text-align:center;position:relative'>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body id="page1">
<div class="block"></div>
</div>
<div class="bg1">
<div class="main">
<!-- footer -->
<footer>
<div class="bg_spinner"></div>
<ul class="pagination">
<li class="current"><a href="images/bg_img1.jpg">1</a></li>
<li><a href="images/bg_img2.jpg">2</a></li>
<li><a href="images/bg_img3.jpg">3</a></li>
<li><a href="images/bg_img4.jpg">4</a></li>
</ul>
<div class="col_1">
<a href="index.html" id="footer_logo">Hana Salon y Spa</a> Copyright 2013
</div>
<div class="col_2">
Diseñado por <a rel="nofollow" href="http://www.ingenniadigital.com/" target="_blank">www.ingenniadigital.com</a>
<!-- {%FOOTER_LINK} -->
</div>
</footer>
<!-- / footer-->
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<script>
$(window).load(function() {
$('.spinner').fadeOut();
$('body').css({overflow:'inherit'});
})
</script>
</body>
</html>
