2

Olá! Tenho um banner onde ele puxa imagens e funções através do Javascript, porém quando passo a página no validator aparece a mensagem "The name attribute on the img element is obsolete. Use the id attribute instead". Tento fazer a troca de name para id, mas o banner para de funcionar.

Como eu poderia fazer? Há como utilizar o getElementByID dentro da tag img?

var Image_slide = new Array("http://www.esquadros.com.br/image/home/_perfiladeira_de_perfis_estruturais_esquadros.jpg", "http://www.esquadros.com.br/image/home/_perfiladeira_de_telhas_metalicas_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_slitter_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_e_transversal_combinado_esquadros.jpg", "http://www.esquadros.com.br/image/home/_linha_de_producao_esquadros.jpg", "http://www.esquadros.com.br/image/home/_software_profil_esquadros.jpg"); // image container
var Img_Length = Image_slide.length; // container length - 1
var Img_current = 0

function slide() {
  if (Img_current >= Img_Length) {
    Img_current = 0;
  }
  document.slide.src = Image_slide[Img_current];
  Img_current++;
}

function auto() {
  setInterval(slide, 3000);
}
window.onload = auto;
document.slide.src = Image_slide[0];

var i = -1;

function nextImg() {
  document.slide.src = Image_slide[(++i) % Image_slide.length];
  if (i >= Image_slide.length) return true;
}

function prevImg() {
  document.slide.src = Image_slide[(i = i <= 0 ? 0 : i - 1) % 3];
}
.banner-topo {
  list-style: none;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  -webkit-transition: width 2s linear, height 2s linear;
  -moz-transition: width 2s linear, height 2s linear;
  -o-transition: width 2s linear, height 2s linear;
  transition: width 2s linear, height 2s linear;
}

.banner-topo img {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
  border-bottom: 4px solid #ffdb00;
}

.banner-topo img,
.slider-active {
  opacity: 1;
}

.cursor {
  color: #fff;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(2, 6, 36, 0.8);
}
<div class="banner-topo">
  <img src="/" name="slide" alt="Banners Principais">
</div>
<div class="cursor">
  <a class="prev" onClick="prevImg()">&#10094;</a>
  <a class="next" onClick="nextImg()">&#10095;</a>
</div>

1 Resposta 1

1

Fiz a alteração no seu código para seu slide funcione utilizando getElementById, criei a variável slideElement que captura a tag img pelo id e também troquei o name por id na tag, e substitui tudo que era document.slide com a variavel slideElement.

var slideElement = document.getElementById("slide");

var Image_slide = new Array("http://www.esquadros.com.br/image/home/_perfiladeira_de_perfis_estruturais_esquadros.jpg", "http://www.esquadros.com.br/image/home/_perfiladeira_de_telhas_metalicas_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_slitter_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_e_transversal_combinado_esquadros.jpg", "http://www.esquadros.com.br/image/home/_linha_de_producao_esquadros.jpg", "http://www.esquadros.com.br/image/home/_software_profil_esquadros.jpg"); // image container
var Img_Length = Image_slide.length; // container length - 1
var Img_current = 0

function slide() {
  if (Img_current >= Img_Length) {
    Img_current = 0;
  }
  slideElement.src = Image_slide[Img_current];
  Img_current++;
}

function auto() {
  setInterval(slide, 3000);
}
window.onload = auto;
slideElement.src = Image_slide[0];

var i = -1;

function nextImg() {
  slideElement.src = Image_slide[(++i) % Image_slide.length];
  if (i >= Image_slide.length) return true;
}

function prevImg() {
  slideElement.src = Image_slide[(i = i <= 0 ? 0 : i - 1) % 3];
}
.banner-topo {
  list-style: none;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  -webkit-transition: width 2s linear, height 2s linear;
  -moz-transition: width 2s linear, height 2s linear;
  -o-transition: width 2s linear, height 2s linear;
  transition: width 2s linear, height 2s linear;
}

.banner-topo img {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
  border-bottom: 4px solid #ffdb00;
}

.banner-topo img,
.slider-active {
  opacity: 1;
}

.cursor {
  color: #fff;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(2, 6, 36, 0.8);
}
<div class="banner-topo">
  <img src="/" id="slide" alt="Banners Principais">
</div>
<div class="cursor">
  <a class="prev" onClick="prevImg()">&#10094;</a>
  <a class="next" onClick="nextImg()">&#10095;</a>
</div>

1
  • 1
    Obrigado Laerte, era isso mesmo. 28/11/2019 às 12:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .