html + css + js 实现图片轮播

HTML、CSS和JavaScript结合可以创建动态的图片轮播效果。下面是一个简单的步骤概述：

1. **HTML结构**：
- 创建一个`<div>`作为容器，通常称为“滑动面板”或“轮播图容器”。
- 使用`<img>`标签添加图片，这些图片会被轮流显示。

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- 添加更多图片 -->
</div>

2. **CSS样式**：
- 设置轮播图的基本样式，如宽度、高度、位置等。
- 定义隐藏其他图片的样式，比如设置它们为`display:none;`。
- 可能还需要添加一些动画效果，比如过渡（transition）和关键帧（@keyframes）。

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  display: none;
  transition: opacity 0.6s ease-in-out;
}

3. **JavaScript (jQuery简化示例)**：
- 使用JavaScript或者库（如jQuery）控制图片的切换。当鼠标悬停或点击时，切换当前显示的图片。

$(document).ready(function() {
  var currentIndex = 0;

  function showSlide(index) {
    $('.slider img').eq(index).show('slow');
    $('.slider img').not('.slide:eq(' + index + ')').hide('slow');
    currentIndex = index;
  }

  showSlide(currentIndex); // 初始化显示第一张

  // 悬浮事件触发切换
  $('.slider').hover(function() {
    clearInterval(autoSlide);
    showSlide((currentIndex + 1) % $('.slider img').length);
  }, function() {
    autoSlide = setInterval(nextSlide, 3000); // 每隔3秒切换
  });

  // 自动切换
  var autoSlide = setInterval(nextSlide, 3000);
  
  function nextSlide() {
    showSlide((currentIndex + 1) % $('.slider img').length);
  }
});