html jquery搭建一个带按钮的轮播图

以下是一个简单的带按钮的轮播图的HTML和jQuery代码示例：

HTML代码：

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="btn-container">
    <button class="prev-btn">Prev</button>
    <button class="next-btn">Next</button>
  </div>
</div>

jQuery代码：

$(document).ready(function() {
  var slideCount = $('.slider img').length;
  var slideWidth = $('.slider img').width();
  var slideHeight = $('.slider img').height();
  var sliderUlWidth = slideCount * slideWidth;
  
  $('.slider').css({ width: slideWidth, height: slideHeight });
  $('.slider img:last-child').prependTo('.slider');
  $('.slider').css('margin-left', -slideWidth);
  
  function moveLeft() {
    $('.slider').animate({
      left: +slideWidth
    }, 200, function() {
      $('.slider img:last-child').prependTo('.slider');
      $('.slider').css('left', '');
    });
  };
  
  function moveRight() {
    $('.slider').animate({
      left: -slideWidth
    }, 200, function() {
      $('.slider img:first-child').appendTo('.slider');
      $('.slider').css('left', '');
    });
  };
  
  $('.prev-btn').click(function() {
    moveLeft();
  });
  
  $('.next-btn').click(function() {
    moveRight();
  });
});

CSS代码：

.slider-container {
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.slider img {
  display: inline-block;
}

.btn-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.prev-btn, .next-btn {
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

.prev-btn:hover, .next-btn:hover {
  background-color: #555;
}

此代码将创建一个具有左右按钮的简单轮播图，用户可以在其中浏览多个图像。