rotacionar imagens sem parar

[Biel. 9]

Olá pessoal. O código abaixo rotaciona números sem parar. Como fazer para rotacionar imagens sem parar ?

<style>
#boxPrincipal{
    max-width:1650px; 
     width:100%;
	 height:200px;  

  margin:auto;
  padding:0px;
  text-align:center;
  background-color:#FFA;  
  border:1px solid blue;
  }
  
#box1 {
    width: 190px;
	height:60px;
	}
	
#imgTete{
width:100%;
height:100%;
opacity: 0;
transition: opacity 900ms;
}

</style>

....

<!-- <div id="boxPrincipal">

        <div id="box1">
              <a href="link0"><img src="image1.png" id="imgTete"   />link0</a>
              <a href="link1"><img src="image2.png" id="imgTete"  />link1</a>
              <a href="link2"><img src="image3.png" id="imgTete"  />link2</a>
              <a href="link3"><img src="image4.png" id="imgTete"  />link3</a>
              <a href="link4"><img src="image5.png" id="imgTete"  />link4</a>
        </div>
    
</div> -->

<p id="idggg"></p>

<script>

var executa;
    intervalo = 500,
    maximo = 10,
    element = document.getElementById('idggg');
   // imagens = document.querySelectorAll('#imgtete');
function funcStart() {
    var contador = 0;
	
      executa = setInterval(function () {
	  contador++;
      element.innerHTML += contador;
	  
     if(contador == maximo){
        contador=0; 
    element.innerHTML = '  ' + contador; 

}

    }, intervalo); 
	
}  


funcStart();

</script>

.....

 

[wanderval 19]

Eu faria diferente a implementação no caso de banner, dependendo da posição se for estilo propaganda usar esse metodo de display/hidden até funciona mas se o objetivo final é um carrosel as paginas utilizando uma abordagem de nos para que a troca de imagens seja suave e realmente deslizando e não imediata apenas exibindo.

 

Mas contudo eu mudaria um pouco esse código para ter uma leitura melhor e não sobrecarregaria o dom inserindo a cada segundo uma nova imagem obrigando o browser a carregar a imagem novamente.

 

CSS

.container-slider{
  width:300px;
  height: 60px;
  
  margin:0 auto;
  padding:0px;
  background:pink;
  text-align:center;
}

img {
  height: 100%;
}

img:not([active=true]) {
  display:none;
}

 

HTML

<div class="principal container-slider">
  <a>
    <img src="https://img.freepik.com/free-vector/flat-horizontal-sale-banner-template-with-photo_23-2149015614.jpg?t=st=1658791924~exp=1658792524~hmac=ac9992d18f718682ae9b0a894abbd160b831d4aa407878aabe530061da113bcf&w=1480"  active="true"/>
  </a>
  <a>
    <img src="https://img.freepik.com/free-vector/flat-horizontal-sale-banner-template-with-photo_23-2149000923.jpg?t=st=1658785975~exp=1658786575~hmac=3cbf700fc07f962a3d7a6f5e06670b131aa47833b9d08033bdd3f8079dd68915&w=1480" />
  </a>
  <a target="_blank" href="https://www.selectvacationproperties.com/wp-content/uploads/2020/02/AdobeStock_265268314.jpeg">
    <img src="https://www.selectvacationproperties.com/wp-content/uploads/2020/02/AdobeStock_265268314.jpeg"/>
  </a>
  <a target="_blank" href="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-facebook-banner-design-template-7471ce255b02886530d575e1b4029e63_screen.jpg?ts=1584732765">
    <img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-facebook-banner-design-template-7471ce255b02886530d575e1b4029e63_screen.jpg?ts=1584732765"/>
  </a>
</div>

 

JS

function showSlides(containerId, intervalTime) {
  let elementSlider = document.querySelector(containerId);
  let intervalRef = setInterval('setActiveSlide("'+ containerId +'")', intervalTime);
  
  enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime);
}

function enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime) {
  elementSlider.addEventListener("mouseover", function(event){
    clearInterval(intervalRef);
  });

  elementSlider.addEventListener("mouseleave", function(event){
    intervalRef = setInterval('setActiveSlide("'+ containerId +'")', intervalTime);
  });
}

function setActiveSlide(container) {
  let images = document.querySelectorAll(`${container} img`);
  
  let removeActiveAttribute = () => {
   images.forEach(image => image.removeAttribute("active"));
  };
  
  let toggleSlide = (indexImageToActive) => {
    removeActiveAttribute();
    images[indexImageToActive].setAttribute("active", true);
  }; 
 
  let indexActive = Array.from(images).findIndex((image, index) => {
    return image.getAttribute("active") === "true";
  });

  if(indexActive == images.length - 1){
    toggleSlide(0);
  }
  else {
    toggleSlide(indexActive+1);
  }
}

showSlides(".principal", 1000);

JSBin ex: https://jsbin.com/finipeponi/edit?html,js,output

[Biel. 9]

Em 01/08/2022 at 21:31, wanderval disse:

Eu faria diferente a implementação no caso de banner, dependendo da posição se for estilo propaganda usar esse metodo de display/hidden até funciona mas se o objetivo final é um carrosel as paginas utilizando uma abordagem de nos para que a troca de imagens seja suave e realmente deslizando e não imediata apenas exibindo.

 

Mas contudo eu mudaria um pouco esse código para ter uma leitura melhor e não sobrecarregaria o dom inserindo a cada segundo uma nova imagem obrigando o browser a carregar a imagem novamente.

 

CSS

.container-slider{
  width:300px;
  height: 60px;
  
  margin:0 auto;
  padding:0px;
  background:pink;
  text-align:center;
}

img {
  height: 100%;
}

img:not([active=true]) {
  display:none;
}

 

HTML

<div class="principal container-slider">
  <a>
    <img src="https://img.freepik.com/free-vector/flat-horizontal-sale-banner-template-with-photo_23-2149015614.jpg?t=st=1658791924~exp=1658792524~hmac=ac9992d18f718682ae9b0a894abbd160b831d4aa407878aabe530061da113bcf&w=1480"  active="true"/>
  </a>
  <a>
    <img src="https://img.freepik.com/free-vector/flat-horizontal-sale-banner-template-with-photo_23-2149000923.jpg?t=st=1658785975~exp=1658786575~hmac=3cbf700fc07f962a3d7a6f5e06670b131aa47833b9d08033bdd3f8079dd68915&w=1480" />
  </a>
  <a target="_blank" href="https://www.selectvacationproperties.com/wp-content/uploads/2020/02/AdobeStock_265268314.jpeg">
    <img src="https://www.selectvacationproperties.com/wp-content/uploads/2020/02/AdobeStock_265268314.jpeg"/>
  </a>
  <a target="_blank" href="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-facebook-banner-design-template-7471ce255b02886530d575e1b4029e63_screen.jpg?ts=1584732765">
    <img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-facebook-banner-design-template-7471ce255b02886530d575e1b4029e63_screen.jpg?ts=1584732765"/>
  </a>
</div>

 

JS

function showSlides(containerId, intervalTime) {
  let elementSlider = document.querySelector(containerId);
  let intervalRef = setInterval('setActiveSlide("'+ containerId +'")', intervalTime);
  
  enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime);
}

function enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime) {
  elementSlider.addEventListener("mouseover", function(event){
    clearInterval(intervalRef);
  });

  elementSlider.addEventListener("mouseleave", function(event){
    intervalRef = setInterval('setActiveSlide("'+ containerId +'")', intervalTime);
  });
}

function setActiveSlide(container) {
  let images = document.querySelectorAll(`${container} img`);
  
  let removeActiveAttribute = () => {
   images.forEach(image => image.removeAttribute("active"));
  };
  
  let toggleSlide = (indexImageToActive) => {
    removeActiveAttribute();
    images[indexImageToActive].setAttribute("active", true);
  }; 
 
  let indexActive = Array.from(images).findIndex((image, index) => {
    return image.getAttribute("active") === "true";
  });

  if(indexActive == images.length - 1){
    toggleSlide(0);
  }
  else {
    toggleSlide(indexActive+1);
  }
}

showSlides(".principal", 1000);

JSBin ex: https://jsbin.com/finipeponi/edit?html,js,output

Esqueci de um detalhe importante: No css  esqueci de trocar o seletor img  por  .imgAprendiz . Fiz alteração no css e javascript  e alterei  img por .imgAprendiz e o slide parou de funcionar . Como sou iniciante em javascript  não conseguir fazer funcionar. Manda uma luz ae pessoal. Obrigado !