写一个轮播图前端代码，html+css+js,自动播放但鼠标选择图片时会放大，水平铺满页面，图片高度360px，每一秒只出现一张完整图片，且图片会自适应窗口，不会变形，有选择前一张图片或后一张图片的功能，也能依次选择图片查看大图效果

好的，以下是符合您要求的轮播图前端代码：

HTML代码：

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="img1.jpg" alt="Image 1" class="slider-image">
    <img src="img2.jpg" alt="Image 2" class="slider-image">
    <img src="img3.jpg" alt="Image 3" class="slider-image">
    <img src="img4.jpg" alt="Image 4" class="slider-image">
    <img src="img5.jpg" alt="Image 5" class="slider-image">
  </div>
  <div class="slider-controls">
    <button class="prev-slide">Previous</button>
    <button class="next-slide">Next</button>
  </div>
</div>

CSS代码：

.slider-container {
  width: 100%;
  height: 360px;
  position: relative;
  overflow: hidden;
}
.slider-wrapper {
  width: auto;
  height: 100%;
  position: absolute;
  transition: all 1s ease;
  white-space: nowrap;
}
.slider-image {
  width: auto;
  height: 100%;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.slider-image:hover {
  transform: scale(1.1);
}
.slider-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.prev-slide, .next-slide {
  background-color: #333;
  border: none;
  color: #fff;
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
}

JavaScript代码：

const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderImages = document.querySelectorAll('.slider-image');
const prevSlide = document.querySelector('.prev-slide');
const nextSlide = document.querySelector('.next-slide');
let currentSlide = 0;

// Set initial position of slider wrapper
sliderWrapper.style.transform = `translateX(-${currentSlide * sliderImages[0].clientWidth}px)`;

// Auto slide every 1 second
setInterval(() => {
  if (currentSlide === sliderImages.length - 1) {
    currentSlide = 0;
  } else {
    currentSlide++;
  }
  sliderWrapper.style.transform = `translateX(-${currentSlide * sliderImages[0].clientWidth}px)`;
}, 1000);

// Previous slide button
prevSlide.addEventListener('click', () => {
  if (currentSlide === 0) {
    currentSlide = sliderImages.length - 1;
  } else {
    currentSlide--;
  }
  sliderWrapper.style.transform = `translateX(-${currentSlide * sliderImages[0].clientWidth}px)`;
});

// Next slide button
nextSlide.addEventListener('click', () => {
  if (currentSlide === sliderImages.length - 1) {
    currentSlide = 0;
  } else {
    currentSlide++;
  }
  sliderWrapper.style.transform = `translateX(-${currentSlide * sliderImages[0].clientWidth}px)`;
});

// Responsive image sizes
window.addEventListener('resize', () => {
  sliderWrapper.style.transform = `translateX(-${currentSlide * sliderImages[0].clientWidth}px)`;
});

此轮播图满足您的要求，可以直接复制粘贴使用。