Diashow Bilder vor- und zurück navigieren

Saskia21

Mitglied
HI Leute

Ich habe von folgender Seite http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm den JavaScript Code für meine Diashow.
Nun probiere ich durch 2 Pfeile die Richtung der Diashow zuverändern.
Nach rechts klappt es auch wunderbar, nur wenn ich das ganze nach links wandern lassen will, fangen die Bilder nicht wieder von vorne an, sondern verschwinden.

Hoffe jemand kann mir erklären, wie ich es hinbekomme, dass das Bilder Array so nach links durchläuft, wie nach rechts.

Viele Grüße,

Saskia
 
Zuletzt bearbeitet:
Hi,

Sven Mintel hat hier im Forum mal einen Ticker vorgestellt. Den könntest du eventuell an deine Anforderungen anpassen.

Code:
<button onclick="strDir='right'">right</button>
<button onclick="strDir='left'">left</button>

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

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

tNews=new Array();
tNews.push('Neu bei <a href="http://www.tutorials.de">tutorials.de</a>...noch nen Ticker!');
tNews.push('Der Ticker tickt jetzt nicht mehr, sondern rollt :o)');
tNews.push('im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert');
tNews.push('Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!');
tNews.push('<b style="color:gold">Nachtrag: Nunmehr tickt er in alle Richtungen</b>');


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

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

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

    //°°°°°°°°°°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    =150;

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

    //Abstand Rahmen->Inhalt
intPadding  =4;

    //Background-color
strBgc      ='#515151';

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

    //Textausrichtung
strAlign    ='left';

    //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="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>';

        //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 + "px";

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

Ciao
Quaese
 
HI,

vielen Dank für das Beispiel!
Ich habe noch mit reingebraut, dass die Bilder schneller durchlaufen, wenn man den Button klickt.

Hier könnt ihr das Beispiel in Action sehen : http://www.die-fotografin-studio.de/Werbung.html

Code:
<button onclick="strDir='right'" onMousedown="copySpeed = 3" onMouseout="copySpeed = 1">right</button>
<button onclick="strDir='left'"  onMousedown="copySpeed = 3" onMouseout="copySpeed = 1">left</button>

<center>
<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="http://www.die-fotografin-studio.de/bilder_herzstuck/Herzstueck_18.JPG">');
tNews.push('<img src="http://www.die-fotografin-studio.de/bilder_herzstuck/Herzstueck_18.JPG">');
tNews.push('<img src="http://www.die-fotografin-studio.de/bilder_herzstuck/Herzstueck_18.JPG">');
tNews.push('<img src="http://www.die-fotografin-studio.de/bilder_herzstuck/Herzstueck_18.JPG">');
tNews.push('<img src="http://www.die-fotografin-studio.de/bilder_herzstuck/Herzstueck_18.JPG">');


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

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

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

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

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

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

    //°°°°°°°°°°Breite
intWidth    =400;

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

    //Abstand Rahmen->Inhalt
intPadding  =0;

    //Background-color
strBgc      ='#FFFFFF';

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

    //Textausrichtung
strAlign    ='left';

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

copySpeed = intStep;


/* * * * * * * * * * * * * * * * * * 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="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>';

        //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 + "px";

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

Viele Grüße,

Saskia
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück