Hola
No se javascript, por lo cual espero su ayuda.
Actualmente estoy buscando la forma de hacer un slideshow/web banner o como quieran llamarlo, con Javascript obteniendo las imagenes de un directorio. He conseguido algunos script que funcionan bien y son muy utiles, pero no se muy bien como anadirle efecto/animacion
El codigo de mi pagina es el siguiente
Código:
<html>
<head>
<title>Experimental (with Zymic src)</title>
<!-- Script 2************************************************************************************** -->
<script src="http://testingsite.zymichost.com/banner/media/getimages.php"></script>
<script src="http://testingsite.zymichost.com/banner/script2.js"> </script>
<!-- Script 2************************************************************************************** -->
</head>
<!-- BODY ****************************************************************************************************** -->
<p> Script 2 (All images, no animation. PHP inside folder + javascript calls. No links yet. Works on sites without php server.... like tripod). Source: http://www.javascriptkit.com/javatutors/externalphp2.shtml </p>
<div style="width: 940px; height: 350px">
<img id="slideshow" src="http://testingsite.zymichost.com/banner/media/image1.jpg" />
</div>
<!-- BODY ****************************************************************************************************** -->
</html>
El codigo del archivo PHP es el siguiente:
Código:
<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");
//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
Bien.
El script que rota las imagenes es el siguiente:
Código:
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "media/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}
window.onload=function(){
setInterval("rotateimages()", 2500)
}
Quisiera saber como anadirle un efecto a la transicion de las imagenes, similar al "carousel slideshow" del siguiente link:
http://sorgalla.com/projects/jcarousel/examples/static_auto.html
Se preguntaran, porque no usas ese script entonces?
Bueno, el asunto es que en ese script se deben declarar las imagenes en el codigo (no las toma de forma "automatica" de un directorio).
Agradezco toda la ayuda que puedan darme.
