| Autor | Zpráva | ||
|---|---|---|---|
| balutbj Profil |
#1 · Zasláno: 23. 9. 2015, 22:08:56
Zdravím všechny,
Mám tabulku se 2 stránkami, každá z nich obsahuje jedno video. Od každého videa mám několik náhledů. V tabulce jsou úvodní náhledy řešené pomocí background-image. Defaultně je tam statický náhled. Problém však nastává, když se snažím, aby se tam postupně zobrazily všechny náhledy (každé 2,5 sekundy; po skončení seznamu znovu od začátku) a to pouze v době, kdy je myš nad tímto náhledem s tím, že se po jeho opuštění vrátí původní obrázek. Firebug hlásí na řádku 30 (popř. 29) chybu "too much recursion". Už si moc nevím rady, s JS teprve začínám. Děkuji za odpovědi. Kód stránky je následující: <!doctype html>
<html>
<head>
<script src="jquery-1.10.min.js"></script>
<script>
var current = new Array();
var currentdefault = 0;
var posledni = 0;
var thumbsnum = 4;
function morethumbs(videoid){
backgrounds = new Array();
backgrounds[0] = 'url("thumbs/'+videoid+'.m0.jpg");';
backgrounds[1] = 'url("thumbs/'+videoid+'.m.jpg");';
for (i = 1; i < thumbsnum; i++) {
backgrounds[i+1] = 'url("thumbs/'+videoid+'.m'+i+'.jpg");';
}
nextBackground(backgrounds,videoid,current);
}
function nextBackground(backgrounds,videoid,current) {
if(!current[videoid]){current[videoid] = 0;}
current[videoid]++;
if(current[videoid] > (backgrounds.length)){current[videoid] = 0;}
myslide(backgrounds,videoid,current[videoid]);
}
function myslide(backgrounds,videoid,i){
//document.getElementById('item-'+videoid).style['background-image'] = backgrounds[i]; // porad si nemohu vybrat - pise to ale pokazde stejnou chybu - too much recursion
document.getElementById('item-'+videoid).style.backgroundImage = backgrounds[i]; // set image src property to image path, preloading image in the process
current[videoid] = current[videoid]+1;
setTimeout(nextBackground(backgrounds,videoid,current),2500);
}
</script>
<style>
.lastvideos td {width: 400px; height: 300px;}
.lastvideos td {background-color: black;}
.lastvideos td:hover {opacity: 1;}
.lastvideos td img {width: 100%; height: 100%;}
.lastvideos td a, .lastvideos td a {color: black;text-decoration: none;background-color: black;}
.lastvideos .smallinfo {opacity: 1;width: 400px; height: 300px; position:static; background: rgba(0, 0, 0, 0.6); text-align: center; color:white;}
.lastvideos .smallinfo:hover {opacity: 0;}
.lastvideos .smallinfo b {font-size: 1.7em;}
</style>
</head>
<body>
<table id='lastvideos' class='lastvideos'>
<tr>
<td class="item" data-videoid="55fbdd75f3791" id="item-55fbdd75f3791" onmouseover="morethumbs('55fbdd75f3791');" onmouseout="this.style['background-image']=url('thumbs/55fbdd75f3791.m.jpg');" style="background-image: url('thumbs/55fbdd75f3791.m.jpg')"><a href="prehraj.php?id=55fbdd75f3791" title="Video 1"><div class="smallinfo"><b>Video 1</b></div></a></td>
<td class="item" data-videoid="55f6e8d5eba6b" id="item-55f6e8d5eba6b" onmouseover="morethumbs('55f6e8d5eba6b');" onmouseout="this.style['background-image']=url('thumbs/55f6e8d5eba6b.m.jpg');" style="background-image: url('thumbs/55f6e8d5eba6b.m.jpg')"><a href="prehraj.php?id=55f6e8d5eba6b" title="Video 2"><div class="smallinfo"><b>Video 2</b></div></a></td>
</tr>
</table>
</body>
</html> |
||
|
Časová prodleva: 9 let
|
|||
0