多图轮播 js怎么写首页,js中轮播图应该怎么写

一、多图轮播的实现原理

多图轮播是一种常见的网页设计元素，它可以在有限的空间内展示更多的图片，提高用户的浏览体验，多图轮播的实现原理是通过JavaScript控制HTML元素的显示和隐藏，实现图片的切换。

二、多图轮播的实现步骤

1. 准备HTML结构：首先需要创建一个包含多个图片的容器，每个图片容器都需要一个唯一的id，以便于后续通过JavaScript进行操作。

<div >
  <div  id="slide1">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div  id="slide2">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div  id="slide3">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- 更多图片 -->
</div>

2. 编写CSS样式：为了让图片在不同设备上都能正常显示，我们需要设置图片的宽度为100%，高度自适应，为了让图片能够水平排列，我们需要设置图片容器的display属性为flex。

.slider {
  display: flex;
}

.slider-item {
  width: 100%;
  height: auto;
}

3. 编写JavaScript代码：我们需要编写一个函数来控制图片的切换，这个函数的参数包括当前显示的图片索引、总图片数量以及图片容器的高度，函数的主要逻辑是遍历所有的图片容器，根据索引来显示或隐藏对应的图片。

function startSlider(curIndex, total, height) {
  var slides = document.querySelectorAll('.slider-item');
  var timer;
  var interval = setInterval(function() {
    for (var i = 0; i < total; i++) {
      slides[i].style.display = 'none'; // 隐藏所有图片
    }
    slides[curIndex].style.display = 'block'; // 显示当前图片
    clearInterval(timer); // 清除定时器，防止连续切换图片时出现闪烁现象
    timer = setInterval(function() {
      for (var i = curIndex; i < total; i++) {
        slides[i].style.opacity = parseFloat(slides[i].style.opacity) - 0.01; // 逐渐显示下一个图片
      }
    }, 50); // 每次切换图片的间隔时间（毫秒）
  }, height * 50); // 根据图片容器的高度计算切换图片的时间间隔（毫秒）
}

4. 调用startSlider函数：我们需要在页面加载完成后调用startSlider函数，传入初始索引、总图片数量以及高度作为参数，我们还需要监听窗口大小变化的事件，当窗口宽度发生变化时，重新计算并设置轮播的时间间隔。

window.addEventListener('resize', function() {
  var total = document.querySelectorAll('.slider-item').length; // 获取总图片数量
  var height = document.querySelector('.slider').offsetHeight / total; // 根据图片容器的高度计算时间间隔（毫秒）
  startSlider(0, total, height); // 开始轮播，传入初始索引、总图片数量以及高度作为参数
});

window.addEventListener('load', function() {
  startSlider(0, document.querySelectorAll('.slider-item').length, document.querySelector('.slider').offsetHeight / document.querySelectorAll('.slider-item').length); // 页面加载完成后开始轮播，传入初始索引、总图片数量以及高度作为参数
});