Wie durch Bilder in var in Javascript gespeichert

Ich muss auf das Klicken des ersten Bildes, um es auf das zweite Bild zu wechseln, und dann auf den Klick, um auf das dritte Bild und so weiter und so weiter bald.Wie durch Bilder in var in Javascript gespeichert

Ich habe dies so weit, und es geht nur auf das zweite Bild und stoppt dort, oder geht sofort in dem dritten ...

<img id="imgClickAndChange" class="art_shop" name="pic"  src="images/edited_images/1.jpg" style="display: none;"  onClick="changeImage();changeImageAgain();"> 

<script language="javascript"> 
function changeImage() { 

    if (document.getElementById("imgClickAndChange").src =  "images/edited_images/1.jpg") 
    { 
     document.getElementById("imgClickAndChange").src =  "images/edited_images/2.jpg"; 
    } 
} 
</script> 

<script language="javascript"> 
function changeImageAgain() { 
if (document.getElementById("imgClickAndChange").src ==   "images/edited_images/2.jpg") 
    { 
    document.getElementById("imgClickAndChange").src =   "images/edited_images/3.jpg"; 
    } 

} 
</script>

Ich habe auch dieses Beispiel, das ich von einer anderen Sache gezogen Ich habe es vor einer Weile gemacht. Es ist ein Bild-Slider, mit den Bildern bereits in der Kopfzeile gespeichert, und sie laden das neue Bild alle X Sekunden. Gibt es eine Möglichkeit, dies zu ändern, um das nächste Bild beim Klicken auf eine Schaltfläche (oder das Bild selbst) zu laden, anstatt es zeitlich zu setzen? Jede Lösung würde funktionieren. Danke

<head> 
    <script type="text/javascript"> 
var slideimages = new Array() // create new array to preload images 
slideimages[0] = new Image() // create new instance of image object 
slideimages[0].src = "images/edited_images/1.jpg" // set image src property   to image path, preloading image in the process 
slideimages[1] = new Image() 
slideimages[1].src = "images/edited_images/2.jpg" 
slideimages[2] = new Image() 
slideimages[2].src = "images/edited_images/3.jpg" 
slideimages[3] = new Image() 
slideimages[3].src = "images/edited_images/4.jpg" 
</script> 
</head> 


<img id="imgClickAndChange" class="art_shop" name="pic"  src="images/edited_images/1.jpg" style="display: none;"  onClick="changeImage();changeImageAgain();"> 


<script type="text/javascript"> 

//variable that will incement through the images 

var step=0 

function slideit(){ 
if (!document.images) 
    return 
document.getElementById('imgClickAndChange').src = slideimages[step].src 
if (step<1) 
    document.getElementById('imgClickAndChange').src = slideimages[step].src 
if (step<2) 
    document.getElementById('imgClickAndChange').src = slideimages[step].src 
if (step<3) 
    step++ 
else 
    step=0 
setTimeout("slideit()",1000) 
} 

slideit() 

</script>

Quelle

2016-04-16 denisbrz

Sie können es viel einfacher machen. Ich würde auch nicht empfehlen, die Bilder vorher zu laden, da es Ihre Seitenladung verlangsamt.

Versuchen Sie folgendes: EDIT: ohne

Looping

<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()"> 

<script> 

// image sources in array. image[0] will have first image src, image[3] will have last src 
var images = [ 
    "images/edited_images/1.jpg", 
    "images/edited_images/2.jpg", 
    "images/edited_images/3.jpg", 
    "images/edited_images/4.jpg" 
] 

var step = 0; 
changeImage(); // set first image src after page loads 

function changeImage() { 
    // exit if no images, or step = number of items in array (4) 
    if (typeof images == "undefined" || step == images.length) return;  

    document.getElementById('imgClickAndChange').src = images[step]; 
    step++; 
} 
</script>

Quelle

2016-04-16 10:05:13 yezzz

Das funktioniert perfekt! Ich danke dir sehr! Gibt es eine Möglichkeit, dass ich verhindern kann, dass es nach img4 zurück zu img1 läuft? Es ist nicht wichtig, wenn es kompliziert ist – denisbrz

yeah Sie können tun: if (step == images.length) step = images.length-1; (erinnern Sie sich an images.length = 4 und Schritt muss im Beispiel 0 - 3 sein). Oder Sie können die Rückgabe am Anfang der Funktion ändern: if (! Images.length || images.length == step) return; Dann stoppt es die Funktion wenn Schritt = 4. – yezzz

bearbeitet die code ... function beendet, wenn das letzte Bild angezeigt wird. Außerdem wurde die Überprüfung für Bilder-Array geändert – yezzz

Wie durch Bilder in var in Javascript gespeichert

Antwort

Verwandte Themen