js中实现循环显示图片

在JavaScript中实现循环显示图片通常涉及到定时器和DOM操作。以下是一个简单的示例，展示了如何使用JavaScript来循环显示一组图片。

基础概念

DOM操作：Document Object Model，允许JavaScript改变网页内容、结构和样式。
定时器：setInterval函数用于周期性地执行某段代码。

示例代码

假设我们有一组图片的URLs存储在一个数组中，我们希望每隔一段时间更换页面上的图片。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环显示图片</title>
</head>
<body>

<img id="myImage" src="" alt="轮播图片">

<script>
// 图片URL数组
var images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  // ...更多图片
];

var currentIndex = 0; // 当前图片索引
var imageElement = document.getElementById('myImage'); // 获取图片元素

// 定义一个函数来更改图片
function changeImage() {
  imageElement.src = images[currentIndex]; // 设置图片元素的src属性
  currentIndex = (currentIndex + 1) % images.length; // 更新索引，实现循环
}

// 初始加载第一张图片
changeImage();

// 每隔3秒调用一次changeImage函数
setInterval(changeImage, 3000);
</script>

</body>
</html>