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:

Código PHP:
<?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 = 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:

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.

Slider simple

angeluz 1 Jan, 2013, 4:22 pm

Finer 1 Jan, 2013, 4:46 pm

angeluz 1 Jan, 2013, 4:53 pm

Cluster 1 Jan, 2013, 5:59 pm

angeluz 1 Jan, 2013, 7:00 pm

storm 17 Feb, 2014, 6:25 am