[FRAGE] Slideshow Bullets nur mit Javascript

[jacky_X]

Hey Leute,
ich bin Informationsdesignstudentin und belege dieses Semester zum ersten mal Javascript.

Unter anderem gehört es zu unserer Prüfungsleistung eine Diashow ohne jQuery zu realisieren.
Soweit hat das auch geklappt. Jedoch habe ich eine Bullets Navigation eingefügt.
Hierbei ist das Problem, dass der ausgewählte Bullet erst 3 sec. (wie mein eingestellter intervall) später aktiv wird.

ich hoffe mir kann jemand helfen.
Hier ist mein Code: (Der Intervall wird am Ende des bodys geladen)

        <div id="slider">
            <img src="images/slide1.jpg" name="animation" id="slide">
            <!-- Standartbild des Sliders -->
        </div>

        <div id="button">
            <!-- Slider Navigation -->
            <a onclick="aktiverbutton(1)"><img src="button1.jpg" id="button1" class="buttons" alt="Slide1" onMouseOver="Buttonwechsel('button1',Highlight)" onMouseOut="Buttonwechsel('button1',Normal)"></a>
            <a onclick="aktiverbutton(2)"><img src="button2.jpg" id="button2" class="buttons" alt="Slide2" onMouseOver="Buttonwechsel('button2',Highlight)" onMouseOut="Buttonwechsel('button2',Normal)"></a>
            <a onclick="aktiverbutton(3)"><img src="button2.jpg" id="button3" class="buttons" alt="Slide3"  onMouseOver="Buttonwechsel('button3',Highlight)" onMouseOut="Buttonwechsel('button3',Normal)"></a>
            <a onclick="aktiverbutton(4)"><img src="button2.jpg" id="button4" class="buttons" alt="Slide4"  onMouseOver="Buttonwechsel('button4',Highlight)" onMouseOut="Buttonwechsel('button4',Normal)"></a>
        </div>

        <script>
            Normal = new Image();
            Normal.src = "button2.jpg"; /* erste Standard-Grafik */
            Highlight = new Image();
            Highlight.src = "button1.jpg"; /* erste Highlight-Grafik */
            
            
        function Buttonwechsel(Bildnr,Bildobjekt) {
            window.document.getElementById(Bildnr).src = Bildobjekt.src; 
        }	
            verzoegerung = 3000;
			slider = 1;
            b = 1;
        
			//Bilder einfügen
			slideshow= new Array();
			for (i = 1; i <= 4; i++) {
			slideshow[i] = new Image();
			slideshow[i].src = "images/slide" + i + ".jpg";
			}
            
            //Wechsel
            function aktiverbutton(ausgewaehlt){
            document.getElementById("button" + ausgewaehlt).src = Highlight.src; 
            document.getElementById("slide").src = slideshow[ausgewaehlt].src;
            slider = ausgewaehlt;
            b = ausgewaehlt;
            
            } 
            
            
			function nextimg() {
                if (slider == 1){
                    document.getElementById("button4").src = Normal.src;
                }
			document.getElementById("slide").src = slideshow[slider].src;
            document.getElementById("button" + b).src = Highlight.src;
                if(b > 1 && b < 5){
                    document.getElementById("button" + (b-1)).src = Normal.src;
                }
            slider++;
            b++;
            if (slider > 4) slider = 1; 
            if (b > 4) b = 1;        
			}
            
            
        </script>

 

[rico2009]

Hi,

du brauchst setTimeout() Window setTimeout() Method dafür. Damit kannst du etwas Zeitverzörgert ausführen lassen.

 

[kkapsner]

ohne jQuery

Das heißt aber nicht, dass du Steinzeit-JS schreiben musst...

So sollte man Eventlistener besser nicht direkt im HTML setzen, sondern im JS. Das ist besser zu warten, flexibler und auch mächtiger.
Auch sind die Methode, mit denen man globale Variablen vermeiden kann, seit langem bekannt (z.B. anonyme Funktionsscopes).
Zusätzlich solltest du deinen Code besser formatieren. So, wie er jetzt ist, kann man nicht gut erkennen, was zusammen gehört.

Um zu deiner Frage zu kommen: Ich kann nicht nachvollziehen, wo da irgendetwas verzögert passieren soll. Die Variable verzoegerung wird ja nirgendwo verwendet... oder ist die Frage, wie man etwas verzögern kann (was ja rico schon beantwortet hat).