[SOLUCIONADO] Transición de contenido

Jhordi123 · #1 (**permalink**) 30/12/2014, 19:22

Buenas noches a todos, quisiera saber si alguien me puede ayudar sobre como puedo hacer un slider de contenido texto e imagenes, busqué por todas partes pero solo hay como galeria de imagenes. Mas o menos deseo uno como esta pagina http://www.montalvospa.com/montalvo_mujeres.php?seccion=mujeres

Es la transición que se encuentra arriba de la caja de comentarios de facebook, en donde tienes que dar click en la flecha para ir a otro contenido.

De antemano muchas gracias.

IsaBelM · #2 (**permalink**) 31/12/2014, 08:27

a ver si es esto lo que buscas

Cita:

<!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></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

a {outline: 0;}

.cont{
width: auto;
height: auto;
}

.cont > div {
display: inline-block;
vertical-align: top;
}

div#contenedor{
width: 400px;
height: 250px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #CCC;
}

div#contenedor div.slider{
width: 200%; /* equivale al ancho de 2 imágenes. no tocar */
position: relative;
left: 0;
top: 0;
}

div#contenedor div.slider img {
width: 400px; /* mismo width de #contenedor */
height: 250px; /* mismo height de #contenedor */
float: left;
}

div#contenedor div.slider > span {
padding: 15px;
width: 120px;
height: 220px;
position: absolute;
top: 0;
left: 0;
background: rgba(41, 38, 38, 0.53);
z-index: 99;
}

div#contenedor div.slider > span > span {
width: 100%;
display: inline-block;
color: rgb(255, 255, 255);
}
</style>
<script type="text/javascript">
function Evento(elemento, nomevento, fnc) {

if (elemento.addEventListener) {

elemento.addEventListener(nomevento, fnc, false);

} else if (elemento.attachEvent) {

elemento.attachEvent('on' + nomevento, fnc);

}
}

var imgslide = [
new imagenes('http://facebookportadas.com/imagenes/comotellamas.jpg', '¿Cómo te llamas?'),
new imagenes('http://facebookportadas.com/imagenes/inocente.jpg', 'El día de los Santos Inocentes'),
new imagenes('http://facebookportadas.com/imagenes/minecraft2.jpg', 'Ratón Micky en robot'),
new imagenes('http://facebookportadas.com/imagenes/diloquesientes.jpg', 'Y verás la de ostias que te llevás')
];

function imagenes(img, txt) {
this.imagen = img;
this.texto = txt;
}

var preImg = [];

for(var i = 0; i < imgslide.length; i++) {

preImg[i] = new Image();
preImg[i].src = imgslide[i].imagen;
}

function mover(posInicial, posFinal, slider, indiceImg){

if (posInicial <= posFinal) {

var siguienteTxtCont = document.createElement('span');
siguienteTxtCont.setAttribute('class', 'contenedorTxt');

var siguienteTxt = document.createElement('span');
siguienteTxt.innerHTML = imgslide[indiceImg].texto;
siguienteTxtCont.appendChild(siguienteTxt);

slider.appendChild(siguienteTxtCont);

var siguienteImg = document.createElement('img');
siguienteImg.setAttribute('src', preImg[indiceImg].src);
slider.appendChild(siguienteImg);

(function desplazar() {

setTimeout(function(){

if (posInicial >= posFinal) {

slider.removeChild(slider.getElementsByTagName('sp an')[0]);
slider.removeChild(slider.getElementsByTagName('im g')[0]);
slider.style.left = 0;
return;
}

posInicial += 2;
slider.style.left = -posInicial + '%';
desplazar();

},6);

})();
}

setTimeout(function() {

var nuevoIndice = parseInt(indiceImg+1) % imgslide.length;

mover(0, posFinal, slider, nuevoIndice);

},3000);
}

function inicia() {

setTimeout(function() {

var slider = document.querySelector('div.slider');

mover(0, 100, slider, 1);

}, 3000);
}

Evento(window, 'load', inicia);
</script>
</head>
<body>

<div id="contenedor">

<div class="slider">
<span class="contenedorTxt"><span>¿Cómo te llamas?</span></span>
<img src="http://facebookportadas.com/imagenes/comotellamas.jpg" alt="i0" />
</div>

</div>

</body>
</html>

Jhordi123 · #3 (**permalink**) 03/01/2015, 05:28

Gracias por la ayuda me sirvió muchísimo.