写一款小米商品轮播图代码

好的，以下是一款小米商品轮播图的代码：

HTML 代码：

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" alt="商品1">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" alt="商品2">
    </div>
    <div class="carousel-item">
      <img src="img3.jpg" alt="商品3">
    </div>
  </div>
</div>

CSS 代码：

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform .5s ease-in-out;
}

.carousel-item {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.carousel-item:not(:first-child) {
  transform: translateX(100%);
}

.carousel-item.active {
  transform: translateX();
}

JavaScript 代码：

var carouselItems = document.querySelectorAll('.carousel-item');
var currentIndex = ;
var intervalId = setInterval(function() {
  carouselItems[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % carouselItems.length;
  carouselItems[currentIndex].classList.add('active');
}, 300);

以上就是一款简单的小米商品轮播图代码，希望对你有帮助！