How to target specific images within a div for animation in JavaScript?

I have a webpage with multiple images inside a specific <div> element, and I want to create a JavaScript function that will animate these images. However, I'm having trouble targeting only the images within the div and excluding others on the page.

HTML

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

JS

 var index = 0;

 function changeBanner() {
   [].forEach.call(document.images, function(v, i) {
   document.images[i].hidden = i !== index;
 });
index = (index + 1) % document.images.length;
 }

 window.onload = function() {
   setInterval(changeBanner, 1000);
 };

I want to modify the JavaScript code so that only the images within the <div class="auto"> are included in the animation. How can I achieve this?

Using JavaScript, you can select HTML elements according to various attributes, including ID, class, and tag name. Here are a few approaches:

Given that your images all have the class "mySlides", you can select them all with getElementsByClassName.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var index = 0;
const imgs = document.getElementsByClassName('mySlides');

function changeBanner() {
  [].forEach.call(imgs, function(v, i) {
    imgs[i].hidden = i !== index;
  });
  index = (index + 1) % imgs.length;
}

window.onload = function() {
  setInterval(changeBanner, 1000);
};

<!-- language: lang-html -->

<img src="https://dummyimage.com/100x50/f55/000">
<div class="auto" style="max-width: 1050px">
  <img class="mySlides" src="https://dummyimage.com/100x100/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/90x90/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/80x80/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/70x70/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/60x60/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/50x50/aaa/fff">
</div>

<!-- end snippet -->

Or, select all <img> elements inside the first element with class "auto" by chaining getElementsByClassName and getElementsByTagName.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var index = 0;
const imgs = document.getElementsByClassName('auto')[0].getElementsByTagName('img');

function changeBanner() {
  [].forEach.call(imgs, function(v, i) {
    imgs[i].hidden = i !== index;
  });
  index = (index + 1) % imgs.length;
}

window.onload = function() {
  setInterval(changeBanner, 1000);
};

<!-- language: lang-html -->

<img src="https://dummyimage.com/100x50/f55/000">
<div class="auto" style="max-width: 1050px">
  <img class="mySlides" src="https://dummyimage.com/100x100/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/90x90/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/80x80/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/70x70/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/60x60/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/50x50/aaa/fff">
</div>

<!-- end snippet -->

Similarly, you could use querySelectorAll.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var index = 0;
const imgs = document.querySelectorAll('.auto img');

function changeBanner() {
  [].forEach.call(imgs, function(v, i) {
    imgs[i].hidden = i !== index;
  });
  index = (index + 1) % imgs.length;
}

window.onload = function() {
  setInterval(changeBanner, 1000);
};

<!-- language: lang-html -->

<img src="https://dummyimage.com/100x50/f55/000">
<div class="auto" style="max-width: 1050px">
  <img class="mySlides" src="https://dummyimage.com/100x100/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/90x90/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/80x80/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/70x70/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/60x60/aaa/fff">
  <img class="mySlides" src="https://dummyimage.com/50x50/aaa/fff">
</div>

<!-- end snippet -->

Alternatively, animate a sprite sheet with CSS.