我试着用jQuery幻灯片展示几张照片

Question

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);

因此，我试图使用上面的代码旋转一系列的4张照片，但是当我加载我的页面时，没有什么事情发生，原始的src照片保持不变。

在我的HTML中，我有id="pauls“src="stpauls”，并将我的文件链接到我的index.html文件。

问候

Answer 1

检查浏览器控制台是否出错，在ready()函数的回调中创建函数

​

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>

​