Así es, creemos que en su mayoría mal que mal sabemos maquetar ya sea a ojo con aplicaciones gráfica como dreamweaver o harcodeando, pero en definitiva hacemos que nuestra web luzca como queremos en la mayoría de los navegadores actuales , y digo actuales por que todos los que trabajamos en el área de construcción de aplicaciones web sabemos lo difícil que es programar para todos los navegadores y todas sus versiones… en fin, lo logramos maquetamos la web a gusto y paladar pero ahora al querer ponerle un eyecandy como es un pasador de imágenes de esos que andan dando vueltas se nos rompe todo lo que con trabajo nos costó armar, ya sea porque llamamos a otra hoja de estilos CSS que trae la aplicación en cuestión o porque realmente no entendemos bien cómo funciona ese pedazo de código que bajamos de la web…

(imagen: pasador jusssto pasando al proximo li)

Entonces si maquetamos a gusto y paladar… codiemos que nuestra html haga lo que nosotros queremos!!!

Suele pasarnos, nos dán una gráfica (si es que no la hicimos nosotros) que usa un pasador de imágenes muy lindo y se nos ocurren formas de maquetarlo usando css html, todo perfecto, pero luego que lo maquetamos … el ponerle la magia nos  mata! :S

Para eso vamos a usar jquery que vino a salvarnos las papas a todos los programadores del mundo del javascript (digo jquery porque es mi framework preferido, pero sabemos bien que existen otros más) .

Entonces que se nos ocurre? Algo así:

		/* SLIDER DE NOTICIAS*/
		var notact="#n-op-1";
		function mueveSlider(notnew, margen){
			$("#n-ul").animate({ "margin-left" : margen}, "slow");
			$(notact).removeClass("op-select");
			$(notnew).addClass("op-select");
			notact=notnew;
		}//end function mueveSlider

		$("#n-op-1").click(function(){
			mueveSlider("#n-op-1", "0px");
			clearInterval(intcac);
		});
		$("#n-op-2").click(function(){
			mueveSlider("#n-op-2", "-650px");
			clearInterval(intcac);
		});
		$("#n-op-3").click(function(){
			mueveSlider("#n-op-3", "-1300px");
			clearInterval(intcac);
		});
		$("#n-op-4").click(function(){
			mueveSlider("#n-op-4", "-1950px");
			clearInterval(intcac);
		});

		var intcac = setInterval(function(){
			switch(notact){
			case "#n-op-1": mueveSlider("#n-op-2","-650px");	break;
			case "#n-op-2": mueveSlider("#n-op-3","-1300px");	break;
			case "#n-op-3": mueveSlider("#n-op-4","-1950px");	break;
			case "#n-op-4": mueveSlider("#n-op-1","0px");	break;
			}
		},3000);

Como podemos apreciar en cada “click” se mueve cada una de las noticias que hay y se para el slider que estaba “prendido” en un principio(el setInterval del final que contiene un switch).

Cualquier cosa me chiflan!