CSS - slideshow se superpone

 
Vista:
sin imagen de perfil

slideshow se superpone

Publicado por walter (47 intervenciones) el 03/03/2015 17:27:31
hola chicos. tengo un problema con un slide que apenas arranca se superponen los li...
luego arranca normalmente, es simplemente al comienzo. les paso el link http://sonidosdistantes.com.ar/tablas/index.html

html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="slide">
  <ul id="galeria" name="galeria">
  <li><div class="slide-img"><img src="img/slide-01.png" width="400" height="450" /></div>
    <div class="slide-info">
      <h1>ACOMPAÑÁ !</h1><br />
<h2>TU PICADA CON UN BUEN VINO</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dolor eget odio bibendum interdum. Donec eget mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. Vivamus sodales dui quis lorem suscipit, eget tempor augue pretium. Donec ac enim ante. Ut faucibus ante id ornare aliquam.
Integer vel elit nisi. Nam ut mattis sapien. </p>
<a href="#" class="consultar">CONSULTAR</a></div></li><!--FIN SLIDE 01-->
 <li><div class="slide-img"><img src="img/slide-02.png" width="321" height="450" /></div>
    <div class="slide-info">
      <h1>VARIEDAD !</h1><br />
<h2>EN CERVEZA ARTESANAL</h2><br />
<p>Aenean tristique metus et nisi semper, vel congue nibh tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed tempor felis a adipiscing feugiat. Duis lacinia tellus et mauris tincidunt, vitae cursus neque faucibus. Aliquam venenatis tempor purus. Nunc molestie varius egestas. Sed elementum urna ac justo iaculis, eu tristique erat elementum.
Vivamus pretium, sapien non faucibus congue, sem odio dapibus purus, eget pellentesque neque magna vel justo. </p><a href="#" class="consultar">CONSULTAR</a></div></li><!--FIN SLIDE 02-->
<li><div class="slide-img"><img src="img/slide-03.png" width="400" height="450" /></div>
    <div class="slide-info">
      <h1>ESPECTACULAR SORTEO !</h1><br />
<h2>PICADA ESPECIAL PARA 2</h2><br />
<p>Vivamus pretium, sapien non faucibus congue, sem odio dapibus purus, eget pellentesque neque magna vel justo. Vestibulum sit amet nisi a ipsum vestibulum condimentum id suscipit nibh. Maecenas volutpat dui eu ipsum facilisis, ut convallis magna viverra. Curabitur feugiat nunc at diam venenatis, in pulvinar sem varius. Sed vitae hendrerit tortor, lobortis elementum mi. Pellentesque non iaculis neque.
</p><a href="#" class="consultar">PARTICIPAR</a></div></li><!--FIN SLIDE 03-->
  </ul></div><!--FIN SLIDE-->


y el 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
/** galeria **/
#galeria{
   margin: 0;
   padding: 0;
   position: relative;
   width: 100%;
   height: 100%;
   list-style: none;
   overflow: hidden;
}
#galeria li{
   position: absolute;
}
#galeria li img{
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
}
#galeria .selected{
   z-index: 1;
   opacity: 1;
   -moz-transition: all 3s ease 0s;
   -ms-transition: all 3s ease 0s;
   -o-transition: aall 3s ease 0s;
   -webkit-transition: all 5s ease 0s;
   transition: all 3s 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;
}
 
/** fin galeria **/


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>


desde ya, muchas gracias
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