JavaScript om afbeeldingen te wijzigen

Ik heb een reeks afbeeldingen met de naam img1, img2, img3, img4, ......., imgx. Dus ik wil een JavaScript coderen om een ​​afbeelding weer te geven img1 op document.onload() en op eerste afbeelding klikken om te wijzigen naar img2 volgende bij tweede klik op de afbeelding die moet worden gewijzigd bij img3 en klik vervolgens op Volgende om elke VOLGENDE knop aan te klikken. Op deze manier heb ik zelfs de VORIGE knop nodig om terug te gaan naar de eerder bekeken afbeeldingen.

Hoe dit te implementeren?

 0
toegevoegd
Bekeken: 38
de bron
Heb je daar een code voor geschreven? iets dat al is geprobeerd?
toegevoegd de auteur Dev, de bron
zijn de afbeeldingen vast of dynamisch?
toegevoegd de auteur Laurence Burke, de bron

2 antwoord

var currentImage = 1;

window.onload = function() {
    showImage();
};

document.getElementById("next").onclick = function() {
    currentImage++;
    showImage();
}

function showImage() {
    document.getElementById("image").src = "img" + currentImage + ".jpg";
}

Dit zijn de basisprincipes en moeten u helpen aan de slag te gaan. Als je hulp nodig hebt bij het implementeren van de rest, vraag ons wat je specifiek wilt doen en wat je hebt geprobeerd. Tip, je zult het geval moeten behandelen waar geen "volgende" afbeelding te zien is. Wil je dat het terugkomt naar het begin of gewoon niet werkt?

4
toegevoegd
de bron
@LaurenceBurke Ik zal er zeker niet voor alles in slagen. Hij moet leren en zichzelf uitproberen.
toegevoegd de auteur Alex Turpin, de bron
Ahh. Sorry voor het onbeleefde antwoord.
toegevoegd de auteur Alex Turpin, de bron
@ Xeon06 - Dit is genoeg Xeon06. Bedankt! Ik zal de rest coderen.
toegevoegd de auteur Mad coder., de bron
moet u ook een vorige klik toevoegen en ervoor zorgen dat de functie niet buiten het bereik van de afbeeldingen komt
toegevoegd de auteur Laurence Burke, de bron
Gewoon het OP laten weten wat er nog meer moet worden toegevoegd. Sorry, daar zou een @ tag voor moeten staan
toegevoegd de auteur Laurence Burke, de bron 
<script type="text/javascript">

var images = new Array("img/image1.jpg", "img/image2.jpg", "img/image3.jpg"); 
var cur_image = 0;

function goNextImage() {
    var img = document.getElementById('image');
    cur_image++;
    if (cur_image == images.length) {
        cur_image = 0;
    }
    img.src = images[cur_image];
}

</script>
1
toegevoegd
de bron