写一个轮播图代码，要求有控件按钮切换图片，并详细解释代码

以下是一个基本的轮播图代码，使用了 jQuery 库。

HTML 代码：

<div class="slideshow">
  <img class="slide" src="path/to/image1.jpg" />
  <img class="slide" src="path/to/image2.jpg" />
  <img class="slide" src="path/to/image3.jpg" />
</div>

<div class="controls">
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

CSS 代码：

.slideshow {
  position: relative;
}
.slideshow .slide {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slideshow .slide.active {
  opacity: 1;
}

.controls {
  margin-top: 10px;
}
.controls button {
  margin-right: 10px;
}

jQuery 代码：

$(function() {

  // 获取轮播图和按钮元素
  var $slideshow = $('.slideshow');
  var $slides = $slideshow.find('.slide');
  var $prev = $('.prev');
  var $next = $('.next');

  // 给第一张轮播图加上 active 类
  $slides.eq(0).addClass('active');

  // 点击按钮切换轮播图
  $prev.on('click', function() {
    var $current = $slideshow.find('.active');
    var index = $slides.index($current);
    $current.removeClass('active');
    $slides.eq((index - 1 + $slides.length) % $slides.length).addClass('active');
  });

  $next.on('click', function() {
    var $current = $slideshow.find('.active');
    var index = $slides.index($current);
    $current.removeClass('active');
    $slides.eq((index + 1) % $slides.length).addClass('active');
  });

});

解释：

1. 在 HTML 中，轮播图的 img 标签和控件按钮的 button 标签都被包裹在一个父容器内。

2. 在 CSS 中，将轮播图的所有图片的 opacity 设为 0，只有 active 图片的 opacity 才设为 1，这样可以实现切换轮播图时淡入淡出的效果。

3. 在 jQuery 中，先获取轮播图、轮播图图片和按钮元素。然后给第一张轮播图加上 active 类。

4. 点击按钮时，获取当前 active 图片的 index，根据按钮是 prev 还是 next，计算出下一张图片的 index，给当前 active 图片移除 active 类，给下一张图片加上 active 类。注意需要使用取余运算防止 index 越界。

5. 这个代码只是一个基本的轮播图，实际使用时还需要考虑更多因素，比如自动轮播、无限循环、响应式等等。