Bildspel
Jag håller på att skapa ett bildspel där jag hämtar bild och text från en XML-fil.
Tyvärr får jag inte detta att funka över huvudtaget. Någon som kan se vad jag gör för fel.
När jag hårdkodar in arrayerna så funkar det.
Tack på förhand!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bildspel.css">
</head>
<body>
<img src="upload/daglilja.jpg" id="slideshow">
<br>
<div id="caption">
bildtext
</div>
<div id="date">
datum
</div>
<a href="#" onclick="changeImage(-1); return false">Förra bilden</a><br>
<a href="#" onclick="changeImage(1); return false">Nästa bilden</a><br>
<script src="bildspel.js"></script>
</body>
</html>
var images = [];
var caption = [];
var dates = [];
var ajax = new XMLHttpRequest();
//alert("Före loadXMLDoc");
ajax.open("GET", "images.xml", false);
ajax.send();
var xml=ajax.responseXML;
//var images = ["upload/daglilja.jpg", "upload/helena.jpg", "upload/krokus.jpg"];
//var caption = ["fin blomma", "underbar ros", "lila krokus"];
var imageNumber = 0;
var imageLength = images.length - 1;
console.log(images[1]);
function changeImage(x) {
imageNumber += x;
//console.log(imageNumber);
//console.log(images);
//om man kommit till arrayen slut starta om
if (imageNumber > imageLength) {
imageNumber = 0;
}
if (imageNumber < 0) {
imageNumber = imageLength;
}
document.getElementById("slideshow").src = images[imageNumber];
document.getElementById("caption").innerHTML = caption[imageNumber];
document.getElementById("date").innerHTML = date[imageNumber];
return false;
}
