Dado que siempre he obtenido de esta página respuestas que necesitaba para poder trabajar ahora les dejo un slider en JAVASCRIPT y CSS, sin ninguna libreria externa.
Espero les sirva.
La he separado en tres archivos un html, otro js y otro css. Aquí les dejo los códigos con los comentarios agregados.
Archivo .JS (solo deberían modificar donde entre comentarios: //configuracion de variables)
Código:
// JavaScript Document
//Funciones extras utilizadas
function is_int (mixed_var) {
// !No description available for is_int. @php.js developers: Please update the function summary text file.
//
// version: 1103.1210
// discuss at: http://phpjs.org/functions/is_int
// + original by: Alex
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + revised by: Matt Bradley
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: WebDevHobo (http://webdevhobo.blogspot.com/)
// % note 1: 1.0 is simplified to 1 before it can be accessed by the function, this makes
// % note 1: it different from the PHP implementation. We can't fix this unfortunately.
// * example 1: is_int(23)
// * returns 1: true
// * example 2: is_int('23')
// * returns 2: false
// * example 3: is_int(23.5)
// * returns 3: false
// * example 4: is_int(true)
// * returns 4: false
if (typeof mixed_var !== 'number') {
return false;
}
return !(mixed_var % 1);
}
//funciones extras utilizadas
// declaracion de variables
var numeroIma;
var anchoIma;
var posicionActual;
var posicionMaxima;
var idListaIma;
var cantidadPixelesMovimiento;
var cantidadPixelesRetroceso;
var pausaEnItems;
var pausaEnItemsFinal;
var milisegundosDeMovimiento;
// declaracion de variables
//configuracion de variables
numeroIma=3; // cantidad de li en la lista cuadros divs o imagenes
anchoIma=1000; // en pixeles
posicionActual=0; // itinerador en pixeles movidos (No Tocar)
posicionMaxima= 0-(numeroIma*anchoIma)+anchoIma; // cantidad maxima de pixeles
idListaIma= "listaImas"; //id de la lista ul que tiene las imagenes o los cuadros en sus li
cantidadPixelesMovimiento= 100; // cantidad de pixeles que se mueven por ves en itineracion las imagenes o cuadros en los li
cantidadPixelesRetroceso= 500; // cantidad de pixeles que se mueven por ves en itineracion las imagenes o cuadros en los li
pausaEnItems = 5; //cantidad de segundos que debe detenerse en cada cuadro o item;
pausaEnItemsFinal = pausaEnItems*1000;
milisegundosDeMovimiento = 10; // cantidad de milisegundos para cambio entre Items.
milisegundosDeRetroceso = 1; // cantidad de milisegundos para cambio entre Items en retroceso (se recomienda mas rapido que el anterior).
//configuracion de variables
//funciones principales (no tocar)
function mover (idLista, px) {
var listaIma;
listaIma=document.getElementById(idLista);
listaIma.style.left = px+"px";
}
function movimiento(){
var nuevaPosicion;
var posicionEntero;
posicionEntero= posicionActual/anchoIma; // averigua si esta justo donde empieza una imagen
if( is_int (posicionEntero) == true ) {
window.clearInterval(intervaloTiempo);
nuevaPosicion = posicionActual-cantidadPixelesMovimiento; // se fija la nueva posicion
posicionActual=nuevaPosicion; // una vez realizado se fija la posicion actual del objeto;
setTimeout("activarSlider()",pausaEnItemsFinal); //se hace la pausa y se vuelve a el intervalo.
} else if (posicionActual > posicionMaxima) { //mayor porque es numero negativo
nuevaPosicion = posicionActual-cantidadPixelesMovimiento; // se fija la nueva posicion
mover(idListaIma, nuevaPosicion); // se mueve el slider
posicionActual=nuevaPosicion; // una vez realizado se fija la posicion actual del objeto;
} else {
window.clearInterval(intervaloTiempo);
intervaloRetroceso=window.setInterval("retroceso()",milisegundosDeRetroceso);
}
}
function retroceso () {
var nuevaPosicion;
if ( posicionActual < 0 ) {
nuevaPosicion = posicionActual+cantidadPixelesRetroceso; // comienza el regreso
mover(idListaIma, nuevaPosicion); // se mueve el slider para atras
posicionActual=nuevaPosicion; // una vez realizado se fija la posicion actual del objeto;
} else {
window.clearInterval(intervaloRetroceso);
intervaloTiempo=window.setInterval("movimiento()",milisegundosDeMovimiento);
}
}
function activarSlider(){
intervaloTiempo=window.setInterval("movimiento()",milisegundosDeMovimiento);
}
//funciones principales (no tocar)
Archivo CSS (no modificar lo que se comenta con NO TOCAR)
Código:
/* CSS Document */
.slider{
width:1000px; /* width en px de la imagenes */
height:300px; /* height en px de la imagenes */
overflow:hidden; /* no tocar */
position:relative; /* no tocar */
padding:0px; /* no tocar */
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
ul {
margin:0; /* no tocar */
padding:0; /* no tocar */
list-style:none; /* no tocar */
position: relative; /* no tocar */
height: 300px; /* height de las imagenes */
width: 3000px; /* multiplicacion del width en px de la imagenes por la cantidad de imagenes*/
left: 0px; /* ubicacion de inicio */
background-color: #FFFF00;
}
li {
width:1000px; /* width en px de la imagenes */
height:300px; /* height en px de la imagenes */
float:left; /* no tocar */
}
Y finalmente el archivo HTML:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SLIDER</title>
<script type="text/javascript" src="slider.js"></script>
<link href="slider.css" rel="stylesheet" type="text/css" />
</head>
<body onload="javascript:activarSlider();">
<div class="slider">
<ul id="listaImas">
<li><img class="imagen" src="../imagenes/principal.png" /></li>
<li><img class="imagen" src="../imagenes/principal.png" /></li>
<li><p>Hola Mundo</p></li>
</ul>
</div>
</body>
</html>
Nota: Dentro de los <li> va el contenido que quieren que se vaya modificando y listo, acuérdense que si agregan items deben ir corrigiendo el css y el js donde los comentarios le indican. Principalmente el width y el height de los elementos.
Yo lo probé en Chrome, IE 9 y IE7 y en Firefox, funciona correctamente, cualquier cosa me lo hacen saber.
Espero les sirva
mi primer aporte al foro.
Cualquier Duda me hacen saber.