Slider simple

angeluz 1 Jan, 2013, 4:22 pm

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:

<title>Presentación de Imágenes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">

var segundos = 4 
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 = 0; pre < imagenes.length; pre++){
	preImagenes[pre] = new Image()
	preImagenes[pre].src = dire + imagenes[pre]
	}
cont=0
function presImagen(){
document.foto.src= dire + 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?10: 0.1;
	setTimeout('subeOpacidad()',10)
	}
}
function cambia(){
eval('document.foto.' + fi + ' = opa')
}
var tiempo
function inicio(){
clearTimeout(tiempo)
bajaOpacidad()
}

</script>
<style type="text/css">
#foto {
filter: alpha(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:

<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.

Finer 1 Jan, 2013, 4:46 pm

alguna imagen de como se veria el slider?..

[Imagen: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]

angeluz 1 Jan, 2013, 4:53 pm

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

Cluster 1 Jan, 2013, 5:59 pm

algun ejemplo en uso?, si me imagino que es pero para que los usuarios se den una idea de que se trata Smile

angeluz 1 Jan, 2013, 7:00 pm

(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

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.

storm 17 Feb, 2014, 6:25 am

Alguna demo de cómo ver en un foro funcionando¿?