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:
CSS:
JAVA:
gracias de antemano. espero alguien pueda ayudarme porque hace meses que estoy con estos problemas.
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
0
