JavaScript中针对特定容器内图片动画的实现教程

<div class="auto" style="max-width: 1050px">
  <img class="mySlides" src="/images/revital sub logo.png" style="width:550px">
  <img class="mySlides" src="/images/design.png" style="width:550px">
  <img class="mySlides" src="/images/Design4.png" style="width:550px">
  <img class="mySlides" src="/images/design2.png" style="width:550px">
  <img class="mySlides" src="/images/design6.png" style="width:550px">
  <img class="mySlides" src="/images/design5.png" style="width:550px">
</div>
<!-- 页面上可能还有其他不希望被动画影响的图片 -->
<img src="/images/other-image.png">

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

function changeBanner(imgs) { // 接收图片集合作为参数
  // 遍历图片集合，只显示当前索引的图片，其他隐藏
  // 注意：NodeList 或 HTMLCollection 不是真正的数组，需要借用 Array.prototype.forEach
  Array.prototype.forEach.call(imgs, function(img, i) {
    img.hidden = (i !== index);
  });

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

window.onload = function() {
  // 在这里调用 setInterval，并传入正确的图片集合
  // 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() {
  // 确保图片集合不为空
  if (imgs.length > 0) {
    // 首次调用以显示第一张图片
    changeBanner();
    // 设置定时器，每1秒切换一次
    setInterval(changeBanner, 1000);
  }
};

var index = 0;
// 1. 获取所有带有 'auto' 类名的元素（返回一个HTMLCollection）
// 2. 选取第一个匹配的元素（索引为0）
// 3. 在该元素内部获取所有 'img' 标签
const autoDiv = document.getElementsByClassName('auto')[0];
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) {
    changeBanner();
    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) {
    changeBanner();
    setInterval(changeBanner, 1000);
  }
};