HTML - problema con slide

   
Vista:

problema con slide

Publicado por walter (28 intervenciones) el 22/12/2015 17:20:55
Hola a todos.
tengo un problema que hasta ahora nadie pudo ayudarme.
Tengo un slide que va pasando imagenes con titulos, algo muy sensillo. El problema es que cuando carga la web se superponen los titulos del mismo hasta que arranca...
HTML:
1
2
3
4
5
6
7
8
9
<div id="slide"><ul id="galeria" name="galeria">
<li><img src="img/slide01.jpg" width="1920" height="1080" />
  <h1>Miniaturas dulces<br />
"de colección"</h1></li>
<li><img src="img/slide02.jpg" width="1920" height="1080" /><h1>La presentación<br />acompañada por el buen gusto</h1></li>
<li><img src="img/slide03.jpg" width="1920" height="1080" /><h1>A la hora de lucirse...<br />discreción</h1></li>
<li><img src="img/slide04.jpg" width="1920" height="1080" /><h1>Un mundo de sensaciones<br /> en tu paladar</h1></li>
<li><img src="img/slide05.jpg" width="1920" height="1080" /><h1>Tiempos de regalar <br />y honrar la mesa</h1></li>
</ul></div>

CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
#slide {
	width: 100%;
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	height: 800px;
	background-color: #FCC;
}
#galeria{
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
	overflow: hidden;
	height: 100%;
}
#galeria li{
	position: absolute;
	height: auto;
	width: 100%;
 
}
#galeria li img{
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#galeria .selected{
	z-index: 1;
	opacity: 1;
	-moz-transition: all 5s ease 0s;
	-ms-transition: all 5s ease 0s;
	-o-transition: all 5s ease 0s;
	-webkit-transition: all 5s ease 0s;
	transition: all 5s ease 0s;
}
#galeria .noselected{
	z-index: 0;
	opacity: 0;
	-moz-transition: all 1s ease 0s;
	-ms-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
}
#galeria h1 {
	font-family: Rochester;
	font-size: 450%;
	color: #FFF;
	position: absolute;
	z-index: 800;
	top: 300px;
	width: 80%;
	margin-left: auto;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0%;
	display: block;
	padding-right: 10%;
	padding-left: 10%;
	line-height: 90%;
	opacity: 0.8;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5), 2px 2px 2px rgba(0,0,0,0.5);
}

JAVA:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
var cons = 1;
function slide_show(){
var elemento = document.getElementById('galeria').getElementsByTagName('li');
for(var n=cons; n <= elemento.length; n++){
 elemento[n].className = 'selected';
 for(var i = 0; i<elemento.length; i++){
  if(i!=cons){
   elemento[i].className = 'noselected';
  }
 }
  cons++;
  break;
 }
 if(cons >= elemento.length){
  cons = 0;
 }
 return false;
}
window.onload = function(){
 setInterval(slide_show, 5000);
}
</script>

gracias de antemano. espero alguien pueda ayudarme porque hace meses que estoy con estos problemas.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

problema con slide

Publicado por xve (1178 intervenciones) el 22/12/2015 18:49:01
Hola Walter, para ello, lo que he hecho, ha sido añadir display:none en la clase noselected y añadir dicha clase a cada <li>... aquí te adjunto el ejemplo que he preparado para probarlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE HTML>
<html>
<head>
<meta charset="uft-8">
<style>
#slide {
	width: 100%;
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	height: 800px;
	background-color: #FCC;
}
 
#galeria{
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
	overflow: hidden;
	height: 100%;
}
 
#galeria li{
	position: absolute;
	height: auto;
	width: 100%;
}
 
#galeria li img{
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 
#galeria .selected{
	z-index: 1;
	opacity: 1;
	-moz-transition: all 5s ease 0s;
	-ms-transition: all 5s ease 0s;
	-o-transition: all 5s ease 0s;
	-webkit-transition: all 5s ease 0s;
	transition: all 5s ease 0s;
}
 
#galeria .noselected{
	z-index: 0;
	opacity: 0;
	-moz-transition: all 1s ease 0s;
	-ms-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
	display:none;
}
 
#galeria h1 {
	font-family: Rochester;
	font-size: 450%;
	color: #FFF;
	position: absolute;
	z-index: 800;
	top: 300px;
	width: 80%;
	margin-left: auto;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0%;
	display: block;
	padding-right: 10%;
	padding-left: 10%;
	line-height: 90%;
	opacity: 0.8;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5), 2px 2px 2px rgba(0,0,0,0.5);
}
</style>
 
<script>
var cons = 1;
 
function slide_show(){
	var elemento = document.getElementById('galeria').getElementsByTagName('li');
	for(var n=cons; n <= elemento.length; n++){
		elemento[n].className = 'selected';
		for(var i = 0; i<elemento.length; i++){
			if(i!=cons){
				elemento[i].className = 'noselected';
			}
		}
		cons++;
		break;
	}
 
	if(cons >= elemento.length){
		cons = 0;
	}
 
	return false;
}
 
window.onload = function(){
	setInterval(slide_show, 5000);
}
</script>
</head>
 
<body>
 
<div id="slide">
	<ul id="galeria" name="galeria">
		<li class="noselected"><img src="img/slide01.jpg" width="1920" height="1080" /><h1>Miniaturas dulces<br />"de colección"</h1></li>
		<li class="noselected"><img src="img/slide02.jpg" width="1920" height="1080" /><h1>La presentación<br />acompañada por el buen gusto</h1></li>
		<li class="noselected"><img src="img/slide03.jpg" width="1920" height="1080" /><h1>A la hora de lucirse...<br />discreción</h1></li>
		<li class="noselected"><img src="img/slide04.jpg" width="1920" height="1080" /><h1>Un mundo de sensaciones<br /> en tu paladar</h1></li>
		<li class="noselected"><img src="img/slide05.jpg" width="1920" height="1080" /><h1>Tiempos de regalar <br />y honrar la mesa</h1></li>
	</ul>
</div>
 
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

problema con slide

Publicado por walter (28 intervenciones) el 23/12/2015 14:10:38
MUCHISIMAS GRACAS xve, al fin pude solucionarlo.
te pediría que me expliques el SELECTED Y NO SELECTED PORQUE NO ME GUSTA COPIAR Y PEGAR CODIGO SIN ENTENDERLO. MUCHAS GRACIAS OTRA VEZ
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

problema con slide

Publicado por xve (1178 intervenciones) el 23/12/2015 18:54:11
Hola Walter, lo que hemos hecho, es añadir la clase noselected a cada <li>, por lo que por defecto, estan todos ocultos.

En el bucle de javascript, lo que haces, es poner a todos con noselected y dejar únicamente el seleccionado con selected...

Revisando tu bucle javascript, lo puedes optimizar poniéndolo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function slide_show(){
	var elemento = document.getElementById('galeria').getElementsByTagName('li');
	for(var i = 0; i<elemento.length; i++){
		if(i==cons){
			elemento[i].className = 'selected';
		}else{
			elemento[i].className = 'noselected';
		}
	}
	cons++;
 
	if(cons >= elemento.length){
		cons = 0;
	}
 
	return false;
}

Espero que te sirva...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

problema con slide

Publicado por walter (28 intervenciones) el 23/12/2015 14:14:07
lo unico que de esta manera quita la transición suave entre uno y el otro, pero es un mal menor :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

problema con slide

Publicado por walter (28 intervenciones) el 23/12/2015 14:44:30
lo cambié a display:block; y funcionó perfecto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar