JQuery实现小米商城轮播图

以下是使用jQuery实现一个简单小米商城轮播图的示例代码：

HTML部分：

<div id="banner">
  <div class="banner-item"><img src="image1.jpg"></div>
  <div class="banner-item"><img src="image2.jpg"></div>
  <div class="banner-item"><img src="image3.jpg"></div>
  <!-- 更多轮播图项 -->
</div>
<div id="banner-dots">
  <span class="dot" data-index="0"></span>
  <span class="dot" data-index="1"></span>
  <span class="dot" data-index="2"></span>
  <!-- 更多点 -->
</div>

CSS部分：

#banner {
  position: relative;
  overflow: hidden;
  height: 400px; /* 根据实际情况设置高度 */
}
.banner-item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
.banner-item img {
  width: 100%;
  height: 100%;
}
#banner-dots {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 5px;
  cursor: pointer;
}
.dot.active {
  background-color: #f00;
}

jQuery部分：

$(document).ready(function() {
  var $bannerItems = $('.banner-item');
  var $dots = $('#banner-dots .dot');
  var currentIndex = 0;
 
  function goToSlide(index) {
    currentIndex = index;
    $bannerItems.eq(currentIndex).show().siblings('.banner-item').hide();
    $dots.eq(currentIndex).addClass('active').siblings('.dot').removeClass('active');
  }
 
  function nextSlide() {
    goToSlide((currentIndex + 1) % $bannerItems.length);
  }
 
  function autoPlay() {
    setInterval(nextSlide, 3000); // 每3秒自动播放下一张图片
  }
 
  $dots.on('click', function() {
    goToSlide($(this).data('index'));
  });
 
  autoPlay(); // 启动自动播放
});

这段代码实现了一个简单的小米商城轮播图，包括图片切换和点点滑动指示。你可以根据实际需求进一步完善，比如添加动画效果、停止自动播放等功能。