Ich habe hier einen Bildlauf Javascript und benötige eure Hilfe weil das Script immer resetet wenn es durchgelaufen ist. Es soll aber anhalten wenn es durchgelaufen ist und nicht reseten.
Auserdem wäre es schön wenn die Scrollleisten mit dem Onmouseover nicht mehr sichtbar sind wenn man links oder rechts am rand des Bildlaufes angekommen ist.
und hier der Code im HTML
Auserdem wäre es schön wenn die Scrollleisten mit dem Onmouseover nicht mehr sichtbar sind wenn man links oder rechts am rand des Bildlaufes angekommen ist.
Code:
<script language="javascript" type="text/javascript">
<!--
var maxbreite = 618;
var maxhoehe = 463;
var bildformat = maxbreite/maxhoehe;
var thmaxbreite = 80;
var thmaxhoehe = 80;
var thumbformat = thmaxbreite/thmaxhoehe;
var bilddaten = new Array();
var thumbdaten = new Array();
var banzahl = 7;
var belegt = banzahl;
function laden()
{
for ( var b=0; b<banzahl; b++ )
{ if ( document.getElementById("thumb"+b+"-fv").childNodes[0] && document.getElementById("thumb"+b+"-fv").childNodes[0].nodeName == 'IMG' )
{ bilddaten[b] = new Array();
thumbdaten[b] = new Array();
document.getElementById("thumb"+b+"-fv").childNodes[0].id = 'bild'+b;
document.getElementById("bildlink-fv").childNodes[0].id = 'bild-gr-fv';
var bildbreite = document.getElementById("bild"+b).width;
var bildhoehe = document.getElementById("bild"+b).height;
if ( bildbreite > maxbreite && bildbreite/bildhoehe > bildformat )
{ var neuehoehe = Math.round(bildhoehe*maxbreite/bildbreite);
bilddaten[b][1] = neuehoehe;
bilddaten[b][0] = maxbreite;
}
else if ( bildhoehe > maxhoehe && bildbreite/bildhoehe <= bildformat )
{ var neuebreite = Math.round(bildbreite*maxhoehe/bildhoehe);
bilddaten[b][0] = neuebreite;
bilddaten[b][1] = maxhoehe;
}
else
{ bilddaten[b][0] = document.getElementById("bild"+b).width;
bilddaten[b][1] = document.getElementById("bild"+b).height;
}
if ( bildbreite > thmaxbreite && bildbreite/bildhoehe > thumbformat )
{ var neuehoehe = Math.round(bildhoehe*thmaxbreite/bildbreite);
document.getElementById("bild"+b).style.height = neuehoehe+'px';
document.getElementById("bild"+b).style.width = thmaxbreite+'px';
}
else if ( document.getElementById("bild"+b).height > thmaxhoehe && bildbreite/bildhoehe <= thumbformat )
{ var neuebreite = Math.round(bildbreite*thmaxhoehe/bildhoehe);
document.getElementById("bild"+b).style.width = neuebreite+'px';
document.getElementById("bild"+b).style.height = thmaxhoehe+'px';
}
}
else
{ // kein Bild
belegt--;
}
}
if ( belegt == 0 )
{ document.getElementById("thumbs-fv").style.display = 'none';
document.getElementById("galerie-fv").style.height = 574-(570-bilddaten[1][1])+'px';
}
bildwechsel(0);
}
function bildwechsel(nr)
{ if ( document.getElementById("thumb"+nr+"-fv").childNodes[0] && document.getElementById("thumb"+nr+"-fv").childNodes[0].nodeName == 'IMG' )
{ document.getElementById("bild-gr-fv").src = document.getElementById("bild"+nr).src;
document.getElementById("bild-gr-fv").style.width = bilddaten[nr][0]+'px';
document.getElementById("bild-gr-fv").style.height = bilddaten[nr][1]+'px';
document.getElementById("bildlink-fv").href = document.getElementById("bild"+nr).src;
if ( belegt != 0 )
{ document.getElementById("bild-gr-fv").style.marginTop = Math.round((maxhoehe-bilddaten[nr][1])/2)+'px';
}
}
}
// Animation
var i = 0;
var aktion = "";
function startnachlinks()
{ aktion = window.setInterval("neuepositionlinks()",10);
}
function startnachrechts()
{ aktion = window.setInterval("neuepositionrechts()",10);
}
function neuepositionlinks()
{ if ( i < 670 )
{ i--;
}
if ( i == -570 )
{ i = 0;
}
document.getElementById("bildlauf1-fv").style.left = i+"px";
if ( i < 0 )
{ document.getElementById("bildlauf2-fv").style.left = (i+570)+"px";
}
if ( i > 0 )
{ document.getElementById("bildlauf2-fv").style.left = (i-570)+"px";
}
}
function neuepositionrechts()
{ if ( i < 570 )
{ i++;
}
if ( i == 570 )
{ i = 0;
}
document.getElementById("bildlauf1-fv").style.left = i+"px";
if ( i < 0 )
{ document.getElementById("bildlauf2-fv").style.left = (i+570)+"px";
}
if ( i > 0 )
{ document.getElementById("bildlauf2-fv").style.left = (i-570)+"px";
}
}
function stopp()
{ window.clearInterval(aktion);
}
-->
</script>und hier der Code im HTML
Code:
<div id="animation-fv">
<!-- Bildanimation ANFANG -->
<div class="nachlinks-fv" onmouseover="startnachlinks();" onmouseout="stopp();"><</div>
<div id="bildlauf-fv">
<div id="bildlauf1-fv" style="left: 360px;">
<!-- Animation Bilder 1 bis 5: -->
<a href="http://umbay.de/link1" onfocus="this.blur();" title=""><img src="./swl-effi_files/d70091_detail5.jpg" alt="">artikel 1</a>
<a href="http://umbay.de/link2" onfocus="this.blur();" title=""><img src="./swl-effi_files/d10152.jpg" alt="">artikel 12</a>
<a href="http://umbay.de/link3" onfocus="this.blur();" title=""><img src="./swl-effi_files/d10470.jpg" alt="">artikel 144</a>
<a href="http://umbay.de/link1" onfocus="this.blur();" title=""><img src="./swl-effi_files/d10122.jpg" alt="">artikel 1456</a>
<a href="http://umbay.de/link1" onfocus="this.blur();" title=""><img src="./swl-effi_files/d10745_detail1.jpg" alt="">artikel 1567</a>
</div>
<div id="bildlauf2-fv" style="left: -210px;">
<!-- Animation Bilder 6 bis 10: -->
<a href="http://umbay.de/link1" onfocus="this.blur();" title=""><img src="./swl-effi_files/d70239.jpg" alt="">artikel 1</a>
<a href="http://umbay.de/link55" onfocus="this.blur();" title=""><img src="./swl-effi_files/d20036.jpg" alt="">artikel 2</a>
<a href="http://umbay.de/link66" onfocus="this.blur();" title=""><img src="./swl-effi_files/d12201.jpg" alt="">artikel 3</a>
<a href="http://umbay.de/link77" onfocus="this.blur();" title=""><img src="./swl-effi_files/d70089.jpg" alt="">artikel 4</a>
<a href="http://umbay.de/link88" onfocus="this.blur();" title=""><img src="./swl-effi_files/d10637.jpg" alt="">artikel 5</a>
</div>
</div>
<div class="nachrechts-fv" onmouseover="startnachrechts();" onmouseout="stopp();">></div>
<!-- Bildanimation ENDE -->