Marquee Problem

Carrear

Erfahrenes Mitglied
Hi Leute,

ihr kennt sicher alle die tolle Marquee Funktion XD Ich habe das Problem, dass die Box immer leer startet und dann auch erst mit dem letzten Elementbis am Ende sein muss, bis unten wieder das erste Element anfängt. Ich möchte aber. dass die Box anfangs schon voll ist und, dass dann mit dem Einrücken des letzten Elements auch gleich das Erste Element erscheint, so, dass keine Lücken vorhanden sind. Wie kann ich das machen?
 
Also der code von einer Marquee ist ja wohl nicht wirklich hilfreich. Hier mal ein Bild im Anhang.

Es beschreibt 3 verschiedene Zustände. der Rahmen zeigt den Div Tag an. Innen drin in Zustand 1 sieht man, dass das erste von vielen Bildern in den Tag einfährt. In Zustand zwei ist man mitten drin. alle Bilder sind eingefahren und in Zustand drei fährt gerade das letzte Bild aus. Das Problem: Ich will Zustand eins und drei nicht. Der Inhalt des Marquee Tags (die Bilder) sollen also von Anfang an oben sein und der Div Layer soll auch nicht erst das warten bis das letzte Bild ausgefahren ist, bis er das erste wieder einfährt. Verstanden? Ich nehme an, dass es scih irgendwie über JS machen lässt.
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    9,5 KB · Aufrufe: 47
Marquee die 2.

Eigentlich sollte ich in folgendem Script eine Antwiort auf meine Marquee Probleme gefunden haben, aber es funktionier irgendwie nicht -.- Schaut mal bitte wer ob / bzw. wenn dann wo der Fehler ist?

Code:
 <script type='text/javascript'>
<!--
var sliderwidth = 105; // Breite des Sliders
var sliderheight = 286; // Höhe des Sliders
var slidespeed = 1; // Geschwindigkeit des Sliders
var slidebgcolor = "#FFFFFF"; // Hintergrundfarbe
var slidedir = "runter"; // Richtung - "hoch" oder "runter"
var leftrightslide = new Array();
var copyspeed = slidespeed;
var i = 0;

/* HIER DIE LINKS UND BILDER ANPASSEN*/
leftrightslide[i++] = '<img src="Assekurata_2007_RGB_72.jpg">';
leftrightslide[i++] = '<div><img src="EF_Primo_RGB72.JPG"></div>';
leftrightslide[i++] = '<div><img src="FINT_12_06_RGB72.JPG"></div>';
leftrightslide[i++] = '<div><img src="OT22.JPG"></div>';
leftrightslide[i++] = '<div><img src="OT_NK3_R1_RGB72.JPG"></div>';

/* AB HIER NICHTS MEHR ÄNDERN */
//leftrightslide = '<nobr>' + leftrightslide.join("") + '</nobr>';
leftrightslide = leftrightslide.join("");
var iedom = document.all || document.getElementById;
if (iedom)
    document.write('<span id="temp" style="visibility:hidden;position:absolute;left:-100px;top:-3000px">' + leftrightslide + '</span>');
var actualheight = '';
var cross_slide, ns_slide;

function fillup(){
    if (iedom){
        cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2;
        cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3;
        cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
        actualheight=document.all? cross_slide.offsetHeight : document.getElementById("temp").offsetHeight;
        cross_slide2.style.top=actualheight+20+"px";
    }
    else if (document.layers){
        ns_slide=document.ns_slidemenu.document.ns_slidemenu2;
        ns_slide2=document.ns_slidemenu.document.ns_slidemenu3;
        ns_slide.document.write(leftrightslide);
        ns_slide.document.close();
        actualheight=ns_slide.document.height;
        ns_slide2.top=actualheight+20;
        ns_slide2.document.write(leftrightslide);
        ns_slide2.document.close();
    }
    if ( slidedir == "hoch" ) {
        lefttime=setInterval("slidetop()",30);
    } else {
        lefttime=setInterval("slidedown()",30);
    }
}
function slidetop(){
    if (iedom){
        if (parseInt(cross_slide.style.top)>(actualheight*(-1)+8))
            cross_slide.style.top=parseInt(cross_slide.style.top)-copyspeed+"px";
        else
            cross_slide.style.top=parseInt(cross_slide2.style.top)+actualheight+"px";

        if (parseInt(cross_slide2.style.top)>(actualheight*(-1)+8))
            cross_slide2.style.top=parseInt(cross_slide2.style.top)-copyspeed+"px";
        else
            cross_slide2.style.top=parseInt(cross_slide.style.top)+actualheight+"px";
    }
    else if (document.layers){
        if (ns_slide.top>(actualheight*(-1)+8))
            ns_slide.top-=copyspeed;
        else
            ns_slide.top=ns_slide2.top+actualheight;

        if (ns_slide2.top>(actualheight*(-1)+8))
            ns_slide2.top=copyspeed;
        else
            ns_slide2.top=ns_slide.top+actualheight;
    }
}

function slidedown(){
    if (iedom){
        if (parseInt(cross_slide.style.top)<(actualheight-8))
            cross_slide.style.top=parseInt(cross_slide.style.top)+copyspeed+"px";
        else
            cross_slide.style.top=parseInt(cross_slide2.style.top)-actualheight+"px";

        if (parseInt(cross_slide2.style.top)<(actualheight-8))
            cross_slide2.style.top=parseInt(cross_slide2.style.top)+copyspeed+"px";
        else
            cross_slide2.style.top=parseInt(cross_slide.style.top)-actualheight+"px";
    }
    else if (document.layers){
        if (ns_slide.top>(actualheight*(-1)+8))
            ns_slide.top-=copyspeed;
        else
            ns_slide.top=ns_slide2.top+actualheight;

        if (ns_slide2.top>(actualheight*(-1)+8))
            ns_slide2.top=copyspeed;
        else
            ns_slide2.top=ns_slide.top+actualheight;
    }
}

if (iedom||document.layers){
    with (document){
        document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
        if (iedom){
            document.write('<div style="position:relative;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;overflow:hidden">');
            document.write('<div style="position:absolute;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;background-color:' + slidebgcolor + '" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">');
            document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>');
            document.write('<div id="test3" style="position:absolute;top:-1000;left:0"></div>');
            document.write('</div></div>');
        }
        else if (document.layers){
            document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');
            document.write('<layer name="ns_slidemenu2" left=0 top=0 onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed"></layer>');
            document.write('<layer name="ns_slidemenu3" left=0 top=0 onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed"></layer>');
            document.write('</ilayer>');
        }
        document.write('</td></table>');
    }
}
//-->
</script>
 
Naja, bin jetzt auf eine Funktion von Sven Mintel umgestiegen:

Code:
<script type="text/javascript">
<!--
/* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */

    //°°°°°°°°°°Die News

tNews=new Array();
tNews.push('<img src="Assekurata_2007_RGB_72.jpg"/>');
tNews.push('<img src="EF_Primo_RGB72.JPG" />');
tNews.push('<img src="FINT_12_06_RGB72.JPG" />');
tNews.push('<img src="OT22.JPG" />');
tNews.push('<img src="OT_NK3_R1_RGB72.JPG" />');


    //°°°°°°°°°°Laufrichtung(up,down,left,right)
strDir      ='up';

    //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
strDelimiter=' + + + ';

    //°°°°°°°°°°Interval in ms
intInterval =50;

    //°°°°°°°°°°Stop bei mouseover?true:false
blnStopHover=true;

    //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
intRepeat   =2;

    //°°°°°°°°°°Rahmen
strBorder   ='1px solid #818181';

    //°°°°°°°°°°Breite
intWidth    =104;

    //°°°°°°°°°°Höhe
intHeight   =286;

    //Abstand Rahmen->Inhalt
intPadding  =0;

    //Background-color
strBgc      ='';

    //Text-color
strTxtc     ='#ffffff';

    //Textausrichtung
strAlign    ='center';

    //Schritt pro Durchlauf(px)
intStep=1;



/* * * * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * * * * * */

    //IE ab V4?
IE=document.all&&!window.opera;
    //DOM-Browser(ausser IE)
DOM=document.getElementById&&!IE;


//läuft ab IE4 und in DOM-Browsern
if(DOM||IE)
  {
        //Ermitteln, ob Ticker horizontal oder vertikal laufen soll
    blnDir=(strDir=='up'||strDir=='down')?true:false;

        //Bei horizontalem Ticker wird ein nobr-, ansonsten ein div-Tag verwendet
    strNobr=(blnDir)?'div':'nobr';

        //Trennzeichen zwischen den Einzelnen Eintraegen
        //bei horizontalem Ticker gemäss Angabe in Variale strDelimiter
        //Ansonsten Zeilenumbrueche
    strDelimiter=(blnDir)?'<br><br>':strDelimiter;

        //String fuer Textausrichtung bei vertikalem Ticker
    strAlign=(blnDir)?'text-align:'+strAlign+';':'';

        //Variable zum Speichern des Intervals
    var objGo;
        //Variable zum Speichern der Position
    intPos=0;

        //String erzeugen fuer JS-Code, falls Ticker beim mouseover stoppen soll
    strStopHover=(blnStopHover)?'onmouseover="clearInterval(objGo)"onmouseout="objGo=setInterval(\'DM_ticken()\','+intInterval+')"':'';

        //Tickertext zu String zusammenfuegen
    strText=(blnDir)?tNews.join(strDelimiter)+strDelimiter:tNews.join(strDelimiter)+strDelimiter;
    strNews=strText;
    for(i=1;i<intRepeat;++i)
        {
        strNews+=strText;
        }

        //TickerCode zu String zusammenfuegen
    strTicker='<div style="'+strAlign+'overflow:hidden;background-color:'+strBgc+
                    ';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+
                    'px;"><'+strNobr+'><span id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+
                    ';"'+strStopHover+'>'+strNews+'</span></'+strNobr+'></div>';

        //TickerCode im Dokument ausgeben
    document.write(strTicker);

        //Funktion, um Ticker ticken zu lassen
    function DM_ticken()
    {
        //Ticker-Objekt je nach Browser ermitteln
    objTicker=(IE)?document.all.ticker:document.getElementById('ticker');

        //Array fuer zu manipulierende Eigenschaften des Tickers je nach Richtung
        //Richtung=new Array(Pixelwert zur Aenderung der Position,Breite/Höhe des Tickers,zu andernder Positionswert);
    arrDir=new Array();
    arrDir['up']    =new Array(-1,objTicker.offsetHeight,'top');
    arrDir['down']  =new Array(1,objTicker.offsetHeight,'top');
    arrDir['left']  =new Array(1,objTicker.offsetWidth,'left');
    arrDir['right'] =new Array(-1,objTicker.offsetWidth,'left');

        //Ermitteln von Breite bzw. Höhe der anzuzeigenden Items
    dblOffset=arrDir[strDir][1]/intRepeat;

        //Neuen Positionswert ermitteln
    switch(strDir)
        {
        case'right':
            intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
        case'left':
            intPos=(intPos>0)?-dblOffset:intPos;break;
        case 'up':
            intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
        case 'down':
            intPos=(intPos>0)?-dblOffset:intPos;break;
        }
        //Neuen Positionswert zuweisen
    objTicker.style[arrDir[strDir][2]]=intPos;

        //Positionswert hoch/heruntersetzen
    intPos+=intStep*arrDir[strDir][0];
    }
        //Erneut ticken lassen
    objGo=setInterval('DM_ticken()',intInterval);
  }
//-->
</script>

Die Funktioniert im IE auch ganz super, aber im FF bewegt sich da leider nichts :(
 
Hi,

bei mir läuft dieser Ticker von Sven Mintel anstandslos auch im FF, ebenso der von Dir gepostete Code (allerdings nicht mit Strict-Doctype).

Ciao
Quaese
 
Zuletzt bearbeitet:
Hi,

bei mir läuft dieser Ticker von Sven Mintel anstandslos auch im FF, ebenso der von Dir gepostete Code (allerdings nicht mit Strict-Doctype).

Ciao
Quaese

Was heißt Strict Doctype?

Mein Doctype ist wie folgt deklariert:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also bei mir funktioniert es nicht und wie du siehst habe ich als Doctype auch transitional angegeben :(
 
Ich hab zwei kleine Änderungen in Svens Quellcode vorgenommen. Damit sollte es funktionieren.

1. position: relative im äusseren DIV einfügen
Code:
        //TickerCode zu String zusammenfuegen
    strTicker='<div style="position: relative; '+strAlign+'overflow:hidden;background-color:'+strBgc+
                    ';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+
                    'px;"><'+strNobr+'><span id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+
                    ';"'+strStopHover+'>'+strNews+'</span></'+strNobr+'></div>';
2. Neue Positionswerte mit Einheit versehen:
Code:
        //Neuen Positionswert zuweisen
    objTicker.style[arrDir[strDir][2]]=intPos + "px";
So funktioniert es offensichtlich mit den unterschiedlichen Doctypes.

Ciao
Quaese
 

Neue Beiträge

Zurück