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:
El codigo del archivo PHP es el siguiente:<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>
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:
Quisiera saber como anadirle un efecto a la transicion de las imagenes, similar al "carousel slideshow" del siguiente link:
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)
}
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.
