Practicas Propuestas

Practica Slider

Primeramente declaramos nuestro array e ingresamos la dirección de las imágenes

seguido declaramos la variable del contador e inicializamos en el primer valor 0

Ahora procedemos a declarar la función slider y lo ejecutamos desde el JavaScript

[code lang=”js”]
//declaramos la función
function slider(){
//buscamos el nombre slider y le asignamos el array de imagen
document.getElementById("slider").src=img[i];
//incremento para la siguiente imagen
i++;
//condicional para que aumente hasta el número maximo del array
if(i>=img.length) i=0;
//ahora declaramos la función setTimeOut para aplicar tiempo
setTimeout("slider()",1000);
}
slider();
[/code]

Ahora en nuestro HTML creamos los elementos y  la función VER

[html]

<ul class="numero">

<li><a href="#" onClick="ver(0)">1</a></li>

<li><a href="#" onClick="ver(1)">2</a></li>

<li><a href="#" onClick="ver(2)">3</a></li>

<li><a href="#" onClick="ver(3)">4</a></li>

<li><a href="#" onClick="ver(4)">5</a></li>

</ul>

[/html]

Le aplicamos estilos:

[css]
.numero{overflow: hidden;padding: 20px;}
.numero li{list-style: none;float: left; height: 20px;}
.numero li a{background:#630C0D; color: #fff; text-decoration: none; padding:15px;border-radius: 50%;}
[/css]

Ahora nos vamos al JavaScript

[code lang=”js”]
function ver(n){
//direcciona la imagen
//recuerda que i es el contador de imagenes
i=n;
document.getElementById("slider").src=img[i];
}
[/code]

 

Practica formulario:

Aquí primeramente creamos los elementos de formulario en el HTML:

[html]
<input type="checkbox" name="check" value="HTML">HTML
<input type="checkbox" name="check" value="BD">BD
<input type="checkbox" name="check" value="Java">Java
<input type="checkbox" name="check" value="JavaScript">JavaScript
<input type="checkbox" name="check" value="Ingles" />Ingles
<input type="checkbox" name="check" value="Mate I" />Mate I
<input type="checkbox" name="check" value="Com II"/>Com II
<input type="checkbox" name="check" value="Modelado"/>Modelado
<input type="button" onClick="interes()" value="Validar">
[/html]

En el JavaScript establecemos

[code lang=”js”]
// declaramos la funcion
function proceso(){
//creamos la variable con el array de elementos a evaluar
var cursos=document.getElementsByName("check");
//creamos la variable respuesta \n responde a salto de lineas
var respuesta="Haz selecionado"+"\n";
//mediante for evaluamos la cantidad de cursos
for(i=0;i<cursos.length;i++){
//el if evalua que opciones a marcado
if(cursos[i].checked==true)
//si ha marcado entonces se anide mediante+=
respuesta+=cursos[i].value+"\n";
}
//muestre la respuesta
alert(respuesta);
}
[/code]

Practica 03

En el HTML establecemos

[html]
<img id="misfotos" src="imagenes/slider1.jpg" width="100%"/>

la primera de las imagenes

<div class="botones">
<a onClick="mover(-1)" class="izquierda"> anterior </a>
<a onClick="mover(1)" class="derecha"> siguiente </a>
</div>

[/html]

En el JavaScript

[code lang=”js”]
var foto = new Array();
foto[0] = "imagenes/slider1.jpg";
foto[1] = "imagenes/slider2.jpg";
foto[2] = "imagenes/slider3.jpg";
foto[3] = "imagenes/slider4.jpg";
foto[4] = "imagenes/slider5.jpg";
var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";

var imagen=0;
function mover(x){
var ima=document.getElementById("misfotos");
var textos=document.getElementById("mistextos");
var ultima=foto.length-1;
var auxiliar=imagen+x;
if(auxiliar<0) auxiliar=ultima; if(auxiliar>ultima) auxiliar=0;
imagen=auxiliar;
ima.src=foto[imagen];
textos.innerHTML=texto[imagen];
}
[/code]