JavaScript循环图像幻灯片

javascript loop image slideshow

本文关键字：幻灯片 图像 循环 JavaScript      更新时间：2023-10-05
var imag = document.getElementById('contentimage');
            var imagarr = ["images/contimgtwo.jpg","images/contimg.jpg"]
            //var convertimg = imagarr[i].toString();
            var runtext = function(){
                for (i=0;i<imagarr.length;i++){
                imag.src=imagarr[i];
                }
            }
      setTimeout(runtext,5000);

.CSS：

   #contentimage { 
    display:block; 
    top:1600px;
    width:500px; 
    height:400px; 
    position:absolute;
} 
    #contentimage:hover { 
        opacity:0.5; 
        cursor:crosshair;
    }

我正在尝试使用 for 循环制作图像幻灯片，这个想法是它将为 .src 路径提供数组中的图像路径，但是问题是 .src=" " 方法要求您" "所以我不能调用数组，所以它找不到图像，有什么办法吗？

你不应该在runtext函数中循环整个数组。这样做实际上只应用数组的最后一个值，并且始终显示最后一个图像。以下是对脚本的修改，可能会起作用：

var imag = document.getElementById('contentimage');
var imagarr = ["images/contimgtwo.jpg", "images/contimg.jpg"];
var index = 0, interval;
var runtext = function(){
    imag.src = imagarr[index];
    if(index < imagarr.length-1) {
        index += 1;
    } else {
        index = 0;
    }
    interval = setTimeout(runtext, 5000);
}
var stopText = function() {
    clearTimeout(interval);
}
interval = setTimeout(runtext, 5000);

我添加了一个停止幻灯片的功能。您仍然遍历数组的所有元素，但索引在每次runtext调用时都会递增。

相关文章：