JavaScript中针对特定容器内图片进行动画处理的教程

<!-- 页面上其他不参与动画的图片 -->
<img src="other-image.png" alt="其他图片">

<div class="auto" style="max-width: 1050px">
  <img class="mySlides" src="image1.png" style="width:550px" alt="幻灯片1">
  <img class="mySlides" src="image2.png" style="width:550px" alt="幻灯片2">
  <img class="mySlides" src="image3.png" style="width:550px" alt="幻灯片3">
  <img class="mySlides" src="image4.png" style="width:550px" alt="幻灯片4">
  <img class="mySlides" src="image5.png" style="width:550px" alt="幻灯片5">
  <img class="mySlides" src="image6.png" style="width:550px" alt="幻灯片6">
</div>

<!-- 页面上其他不参与动画的图片 -->
<img src="another-other-image.png" alt="又一张其他图片">

var index = 0; // 当前显示的图片索引

function changeBanner(imagesCollection) {
  // 遍历图片集合，根据索引显示或隐藏图片
  Array.prototype.forEach.call(imagesCollection, function(img, i) {
    img.hidden = (i !== index); // 如果不是当前索引的图片，则隐藏
  });

  // 更新索引，实现循环播放
  index = (index + 1) % imagesCollection.length;
}

// 页面加载完成后启动定时器
window.onload = function() {
  // 这里我们将把图片选择逻辑集成进来
  // setInterval(function() { changeBanner(imgs); }, 1000);
};

var index = 0;
// 选择所有具有'mySlides'类名的元素
const imgs = document.getElementsByClassName('mySlides');

function changeBanner() {
  Array.prototype.forEach.call(imgs, function(img, i) {
    img.hidden = (i !== index);
  });
  index = (index + 1) % imgs.length;
}

window.onload = function() {
  // 确保imgs集合不为空
  if (imgs.length > 0) {
    setInterval(changeBanner, 1000);
  }
};

var index = 0;
// 1. 获取所有类名为'auto'的元素，并取第一个（如果有多个'auto' div）
const autoDiv = document.getElementsByClassName('auto')[0]; 
// 2. 在这个'autoDiv'内部，获取所有的'img'标签
const imgs = autoDiv ? autoDiv.getElementsByTagName('img') : []; // 确保autoDiv存在

function changeBanner() {
  Array.prototype.forEach.call(imgs, function(img, i) {
    img.hidden = (i !== index);
  });
  index = (index + 1) % imgs.length;
}

window.onload = function() {
  if (imgs.length > 0) {
    setInterval(changeBanner, 1000);
  }
};

var index = 0;
// 使用CSS选择器选中所有在'.auto'元素内部的'img'标签
const imgs = document.querySelectorAll('.auto img');

function changeBanner() {
  Array.prototype.forEach.call(imgs, function(img, i) {
    img.hidden = (i !== index);
  });
  index = (index + 1) % imgs.length;
}

window.onload = function() {
  if (imgs.length > 0) {
    setInterval(changeBanner, 1000);
  }
};