Nel mio sito ho una Slideshow il mio problema � che non ho capito come funziona il tempo dell'animazione. Malgrado cambi e metta qualsiasi tempo 60s 80s 130s non cambia niente si vede la sequenza dalla prima foto all'ultima e poi NON inizia dalla prima ma da met� della sequenza:
HTML
codice HTML:
<div id="slider">
<ul>
<li><img style="width: 181px; height: 266px;" src="images/slide/2.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/3.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/400.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/5.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/6.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/7.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/8.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/9.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/10.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/11.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/12.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/13.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/14.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/20.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/30.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/40.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/501.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/400.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/70.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/80.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/90.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/100.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/110.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/120.jpg"></li>
<li><img style="width: 181px; height: 266px;" src="images/slide/130.jpg"></li>
<li style="left: 0px; right: auto; width: 247px;"><img style="width: 181px; height: 266px;" src="images/slide/400.jpg"></li>
</ul>
CSS
codice:
/*style slider*/
#slider{margin:0 10px;padding:0;float:left;width:130px;height:1130px}
#slider ul{margin:0;padding:0;list-style:none;float:left;position:relative}
#slider ul li{margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;
-webkit-animation-name:slides_animation;
-webkit-animation-duration:130s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 130s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name:slides_animation;
-moz-animation-duration:130s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 130s;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name:slides_animation;
animation-duration:130s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}
#slider ul li:nth-child(2){-webkit-animation-delay:5s;-moz-animation-delay:5s;animation-delay:5s}
#slider ul li:nth-child(3){-webkit-animation-delay:10s;-moz-animation-delay:10s;animation-delay:10s}
#slider ul li:nth-child(4){-webkit-animation-delay:15s;-moz-animation-delay:15s;animation-delay:15s}
#slider ul li:nth-child(5){-webkit-animation-delay:20s;-moz-animation-delay:20s;animation-delay:20s}
#slider ul li:nth-child(6){-webkit-animation-delay:25s;-moz-animation-delay:25s;animation-delay:25s}
#slider ul li:nth-child(7){-webkit-animation-delay:30s;-moz-animation-delay:30s;animation-delay:30s}
#slider ul li:nth-child(8){-webkit-animation-delay:35s;-moz-animation-delay:35s;animation-delay:35s}
#slider ul li:nth-child(9){-webkit-animation-delay:40s;-moz-animation-delay:40s;animation-delay:40s}
#slider ul li:nth-child(10){-webkit-animation-delay:45s;-moz-animation-delay:45s;animation-delay:45s}
#slider ul li:nth-child(11){-webkit-animation-delay:50s;-moz-animation-delay:50s;animation-delay:50s}
#slider ul li:nth-child(12){-webkit-animation-delay:55s;-moz-animation-delay:50s;animation-delay:55s}
#slider ul li:nth-child(13){-webkit-animation-delay:60s;-moz-animation-delay:60s;animation-delay:60s}
#slider ul li:nth-child(14){-webkit-animation-delay:65s;-moz-animation-delay:65s;animation-delay:65s}
#slider ul li:nth-child(15){-webkit-animation-delay:70s;-moz-animation-delay:70s;animation-delay:70s}
#slider ul li:nth-child(16){-webkit-animation-delay:75s;-moz-animation-delay:75s;animation-delay:75s}
#slider ul li:nth-child(17){-webkit-animation-delay:80s;-moz-animation-delay:80s;animation-delay:80s}
#slider ul li:nth-child(18){-webkit-animation-delay:85s;-moz-animation-delay:85s;animation-delay:85s}
#slider ul li:nth-child(19){-webkit-animation-delay:90s;-moz-animation-delay:90s;animation-delay:90s}
#slider ul li:nth-child(20){-webkit-animation-delay:95s;-moz-animation-delay:95s;animation-delay:95s}
#slider ul li:nth-child(21){-webkit-animation-delay:100;-moz-animation-delay:100s;animation-delay:100s}
#slider ul li:nth-child(22){-webkit-animation-delay:105s;-moz-animation-delay:105s;animation-delay:105s}
#slider ul li:nth-child(23){-webkit-animation-delay:110s;-moz-animation-delay:110s;animation-delay:110s}
#slider ul li:nth-child(24){-webkit-animation-delay:115s;-moz-animation-delay:115s;animation-delay:115s}
#slider ul li:nth-child(25){-webkit-animation-delay:120s;-moz-animation-delay:120s;animation-delay:120s}
#slider ul li:nth-child(26){-webkit-animation-delay:125s;-moz-animation-delay:125s;animation-delay:125s}
#slider ul li:nth-child(27){-webkit-animation-delay:130s;-moz-animation-delay:130s;animation-delay:130s}
#slider ul li img{display:inline-block
}
/*animation css3*/
@-webkit-keyframes slides_animation{
0%{opacity:0;}
4%{opacity:1;}
16%{opacity:1;}
24%{opacity:0;}
100%{opacity:0;}
}
@-moz-keyframes slides_animation{
0%{opacity:0;}
4%{opacity:1;}
16%{opacity:1;}
24%{opacity:0;}
100%{opacity:0;}
}
@keyframes slides_animation{
0%{opacity:0;}
4%{opacity:1;}
16%{opacity:1;}
24%{opacity:0;}
100%{opacity:0;}
}
Grazie a chi mi risponde