im trying to use jQuery to slideshow a few photos

user_18510778 0
Viewed 16
var myImage = document.getElementById("pauls");
var imageArray = ["stpauls.jpg", "stpauls1.jpg", "stpauls2.jpg", "st pauls3.jpg"];
var imageIndex = 0;
$(document).ready (function.changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex ++;
if (imageIndex >= imageArray.length) {
    imageIndex = 0;
}
});

setInterval(changeImage, 5000);

so im trying to rotate a series of 4 photos using the code above, but when i load my page, nothing happens the original src photo stays

in my HTML i have id="pauls" src="stpauls" and linked my file to my index.html file

regards

html jquery
1 Answers

check browser console for error, create the function inside the callback of ready() function

var myImage = document.getElementById("pauls");
var imageArray = ["https://singlecolorimage.com/get/5b71aa/100x100", "https://singlecolorimage.com/get/31a57e/100x100", "https://singlecolorimage.com/get/55ae19/100x100", "https://singlecolorimage.com/get/ae1946/100x100"];
var imageIndex = 0;


$(document).ready(function() {
  function changeImage() {
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
      imageIndex = 0;
    }
  }

  setInterval(changeImage, 1000);
});
<img id="pauls" src="https://singlecolorimage.com/get/ae1946/100x100" width="100">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

user_40823440
Related