Slider simple
Hola, bueno buscando tutoriales para aprender un poco de javascript, encontré este tutorial, no recuerdo como se llamaba la página, la encontré en go...

Hola, bueno buscando tutoriales para aprender un poco de javascript, encontré este tutorial, no recuerdo como se llamaba la página, la encontré en google Tongue

Empezemos:
Iremos a nuestro servidor FTP (filezilla).
Creamos una carpeta en nuestra raíz, el nombre ustedes lo eligen.
Agregamos en esta las imágenes que deseemos agregar al slider.

Ahora vamos a la plantilla donde deseemos agregar el slider, usaré header como ejemplo:
Acp=>estilos y plantillas=>plantillas=>THEME=header
Hasta el final agregamos el siguiente código:
Código PHP:
<title>Presentación de Imágenes</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
script language="javascript">

var 
segundos 
var dire "poke" 

var imagenes=new Array()
imagenes[0]="Bulbasaur.png"
imagenes[1]="Charmander.png"
imagenes[2]="Squirtle.png"


if(dire != "" && dire.charAt(dire.length-1) != "/")
{
dire dire "/"}

var 
preImagenes = new Array()
for (
pre 0pre imagenes.lengthpre++){
    
preImagenes[pre] = new Image()
    
preImagenes[pre].src dire imagenes[pre]
    }
cont=0
function presImagen(){
document.foto.srcdire imagenes[cont]
subeOpacidad()
if (
cont imagenes.length-1)
    {
cont ++}
else
    {
cont=0}
tiempo=window.setTimeout('bajaOpacidad()',segundos*1000)
}
var 
iex navigator.appName=="Microsoft Internet Explorer" true false;
var 
fi iex?'filters.alpha.opacity':'style.opacity'
var opa iex 100 1;
function 
bajaOpacidad(){
eval(
opa)
if(
opa >= 0){
    
cambia()
    
opa -= iex?10:0.1;
    
setTimeout('bajaOpacidad()',50)
    }
else{
presImagen()}
}

function 
subeOpacidad(){
opaci iex?100:1;
if(
opa <= opaci){
    
cambia()
    
opa += iex?100.1;
    
setTimeout('subeOpacidad()',10)
    }
}
function 
cambia(){
eval(
'document.foto.' fi ' = opa')
}
var 
tiempo
function inicio(){
clearTimeout(tiempo)
bajaOpacidad()
}

</
script>
<
style type="text/css">
#foto {
filteralpha(opacity=100)
}
</
style>
</
head>

<
body bgcolor="#FFFFFF" text="#000000" leftmargin="0" marginwidth="0" >
<
div align="center"><img src="poke/Bulbasaur.png" name="foto" id="foto" onClick="inicio()"
</
div
Ahora lo personalizamos, lo primero:
Cita:var segundos = 4
var dire = "poke"
Var segundos= 4 (el número de segundos que deseemos para que cambie la imagen.
Var dire= agreguen el nombre del directorio donde pusieron las imágenes anteriormente. NO OLVIDEN LOS "".
Cita:var imagenes=new Array()
imagenes[0]="Bulbasaur.png"
imagenes[1]="Charmander.png"
imagenes[2]="Squirtle.png"
Aquí agregamos entre las comillas("-") el nombre de las imágenes que deseemos mostrar; si desean agregar más imágenes agreguen una nueva línea con [3], [4], según el caso.
Al final buscamos:
Código:
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" marginwidth="0" >
<div align="center"><img src="poke/Bulbasaur.png" name="foto" id="foto" onClick="inicio()">
</div>
Cambiamos el img src="aquí nuestra imagen"

Adiós, hay códigos que no les verán sentido, es para que el script funcione en internet xplorer Big Grin

Adiós.

Muestra:
[Imagen: 14w4rae.png]
Última modificación: 1 Jan, 2013, 4:54 pm por AHRLabs.
Se vería así:
[Imagen: 14w4rae.png]
El gris es por el fondo de mi foro, la imagen es PNG sin fondo.

Post inicial, editando...

Adiós
algun ejemplo en uso?, si me imagino que es pero para que los usuarios se den una idea de que se trata Smile
(1 Jan, 2013, 5:59 pm)Cluster escribió: algun ejemplo en uso?, si me imagino que es pero para que los usuarios se den una idea de que se trata Smile

Es simple, colocas las imágenes, en el tuto dice, y al dar click sobre estas comienza el traslado de imágenes Big Grin

Solo se recorren al dar click en la primer imagen.
Adiós.
Alguna demo de cómo ver en un foro funcionando¿?