Смена фото на карточке товара при ховере [закрыт]

05 марта 2021, 16:10

Закрыт. Данный вопрос необходимо конкретизировать. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 1 год назад.

Улучшить вопрос

Есть каталог товаров. Нужно сделать, чтобы при ховере на карточку какого-либо товара, у этого товара раз в секунду менялись фото и под фото была шкала, которая тоже перемещалась при смене фото. Количество фото может быть произвольным, может быть одно, тогда фото не должно меняться, а может быть и 10 фото. Как такое реализовать?

Answer 1

var width = 130; 
 
var list = document.body.querySelector('ul'); 
var liArr = document.body.querySelectorAll('li'); 
var tdArr = document.body.querySelectorAll('td'); 
 
var position = 0, 
  count = 0; 
 
tdArr[0].style.background = 'black'; 
 
document.body.querySelector('.images').addEventListener('mouseout', () => { 
  mouseOut = true; 
}); 
 
document.body.querySelector('.images').addEventListener('mouseover', () => { 
  mouseOut = false; 
 
  if (mouseOut || count == liArr.length - 1) { 
    clearTimeout(run); 
  } 
 
  var run = setTimeout(() => { 
 
    if (count < liArr.length - 1 && !mouseOut) { 
      position -= width; 
      list.style.marginLeft = position + 'px'; 
 
      tdArr[count].style.background = 'white'; 
      tdArr[count + 1].style.background = 'black'; 
      count++; 
    } 
 
  }, 1000); 
 
});

body { 
  display: flex; 
  justify-content: center; 
} 
 
.carousel { 
  position: relative; 
  width: 138px; 
  padding: 10px 40px; 
  border: 1px solid #CCC; 
  border-radius: 15px; 
  background: lightgray; 
} 
 
.carousel img { 
  width: 130px; 
  height: 130px; 
  display: block; 
} 
 
.gallery { 
  width: 130px; 
  overflow: hidden; 
} 
 
.gallery ul { 
  height: 130px; 
  width: 9999px; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  transition: margin-left 250ms; 
  font-size: 0; 
} 
 
.gallery li { 
  display: inline-block; 
} 
 
table { 
  width: 138px; 
} 
 
table td { 
  background: white; 
  border: 1px solid black; 
}

<div class="carousel"> 
  <div class="gallery"> 
    <ul class="images"> 
      <li><img src="https://js.cx/carousel/1.png"></li> 
      <li><img src="https://js.cx/carousel/2.png"></li> 
      <li><img src="https://js.cx/carousel/3.png"></li> 
      <li><img src="https://js.cx/carousel/4.png"></li> 
      <li><img src="https://js.cx/carousel/5.png"></li> 
    </ul> 
  </div> 
  <table> 
    <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
    </tr> 
  </table> 
</div>