用JavaScript实现轮播图的6种方法及实现技巧

7 min read

以下是一个简单的轮播图实现，可以参考：

HTML代码：

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS代码：

.slider {
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider img {
  width: 800px;
  height: 400px;
  float: left;
  display: none;
}

JavaScript代码：

var sliderIndex = 0;
var sliderTimer = null;
var sliderLength = document.querySelectorAll('.slider img').length;

function showSlider() {
  var sliderItem = document.querySelectorAll('.slider img');
  for (var i = 0; i < sliderLength; i++) {
    sliderItem[i].style.display = "none";
  }
  sliderIndex++;
  if (sliderIndex > sliderLength) {
    sliderIndex = 1;
  }
  sliderItem[sliderIndex - 1].style.display = "block";
  sliderTimer = setTimeout(showSlider, 3000);
}

window.onload = showSlider;

该代码使用了setTimeout函数和计时器来实现自动轮播，并使用CSS overflow属性和JavaScript display属性来实现图片的滑动效果。

除此之外，还有以下几种实现方法：

  1. CSS动画：使用CSS的keyframes属性和animation属性实现轮播动画；
  2. jQuery插件：使用jQuery插件库中的轮播插件实现；
  3. CSS3转换：使用CSS3中的transform属性和transition属性实现轮播转换效果；
  4. Vue组件：使用Vue.js组件库中的轮播组件实现。