帮我写一个移动端轮播图

以下是一个简单的移动端轮播图的代码示例，使用了jQuery库和CSS3过渡动画：

HTML结构：

<div class="slider">
  <ul class="slides">
    <li><img src="slide1.jpg"></li>
    <li><img src="slide2.jpg"></li>
    <li><img src="slide3.jpg"></li>
  </ul>
</div>

CSS样式：

.slider {
  position: relative;
  overflow: hidden;
}
.slides {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.5s ease;
}
.slides li {
  flex: 0 0 100%;
  max-width: 100%;
}

JavaScript代码：

$(function() {
  var slides = $('.slides');
  var slideWidth = $('.slider').width();
  var currentSlide = 1;
  var totalSlides = slides.children().length;

  function goToSlide(n) {
    slides.css('transform', 'translateX(' + -(n-1) * slideWidth + 'px)');
    currentSlide = n;
    updateNav();
  }

  function updateNav() {
    $('.nav-dot').removeClass('active');
    $('.nav-dot[data-slide="' + currentSlide + '"]').addClass('active');
  }

  $('.next').on('click', function() {
    if (currentSlide === totalSlides) {
      goToSlide(1);
    } else {
      goToSlide(currentSlide + 1);
    }
  });

  $('.prev').on('click', function() {
    if (currentSlide === 1) {
      goToSlide(totalSlides);
    } else {
      goToSlide(currentSlide - 1);
    }
  });

  $('.nav-dot').on('click', function() {
    goToSlide($(this).data('slide'));
  });

  for (var i = 1; i <= totalSlides; i++) {
    $('.nav-dots').append('<span class="nav-dot" data-slide="' + i + '"></span>');
  }

  updateNav();
});

说明：

HTML结构中的.slider是轮播图的容器，.slides是轮播图的图片列表。
CSS样式中使用了flex布局，使得图片可以水平排列。
JavaScript代码中使用了jQuery库，绑定了点击事件来切换轮播图。
通过计算容器的宽度，可以实现移动端响应式轮播图。
添加了导航点，以便用户可以快速切换到指定的图片。