Javascript轮播图demo ｜青训营轮播图是网页设计中常见的元素之一，通过展示多张图片或内容，能够提升页面的视

轮播图是网页设计中常见的元素之一，通过展示多张图片或内容，能够提升页面的视觉效果和用户体验。本文将通过Javascript编写一个基础的轮播图Demo，以展示如何实现轮播图的基本功能。

HTML结构：首先，我们需要在HTML中定义轮播图的结构。以下是一个简单的示例结构：

<div class="slider">
  <ul class="slides">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
</div>

我们使用<div>元素作为轮播图的容器，其中嵌套一个<ul>元素作为图片列表，每个图片使用<li>元素包裹，并使用<img>元素来显示图片。

CSS样式：为了使轮播图能够正常显示，我们需要为其添加一些基本的CSS样式。以下是一个简单的示例样式：

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

.slides {
  width: 2400px;
  height: 400px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.slides li {
  float: left;
  width: 800px;
  height: 400px;
}

我们设置了轮播图容器的宽度和高度为800px和400px，使用overflow: hidden来隐藏超出容器范围的内容。图片列表的宽度设置为所有图片宽度之和（这里假设每张图片宽度都为800px），高度与容器一致。同时，我们将图片列表的list-style-type设置为none，去除了默认的列表样式，并设置margin和padding为0。每个图片项使用float: left来使它们横向排列，并设置宽度和高度与容器一致。

Javascript逻辑：接下来，我们将使用Javascript编写轮播图的逻辑部分。以下是一个基本的示例：

// 获取轮播图容器和图片列表
var slider = document.querySelector('.slider');
var slides = document.querySelectorAll('.slides li');

// 设置初始索引和轮播间隔时间
var currentIndex = 0;
var interval = 3000;

// 定时切换图片
setInterval(function() {
  // 隐藏当前图片
  slides[currentIndex].style.display = 'none';
  
  // 更新索引
  currentIndex++;
  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }
  
  // 显示下一张图片
  slides[currentIndex].style.display = 'block';
}, interval);

首先我们使用document.querySelector方法获取轮播图容器的DOM元素，并使用document.querySelectorAll方法获取图片列表中每个图片项的DOM元素。

然后，我们定义了初始索引currentIndex为0，表示当前显示的图片索引。interval表示轮播的间隔时间，这里设置为3秒。

接着，我们使用setInterval函数设置一个定时器，每隔interval时间执行一次回调函数。

在回调函数中，我们先隐藏当前显示的图片，通过设置当前图片的display属性为none实现隐藏。

然后，我们更新索引currentIndex，并判断是否达到列表最后一张图片，如果是，则将索引重置为0，实现循环切换图片的效果。

最后，我们显示下一张图片，通过将下一张图片的display属性设置为block实现显示。

我们可以看到如何使用Javascript编写一个简单的轮播图Demo。通过定义HTML结构，添加CSS样式，以及编写Javascript逻辑，我们能够实现轮播图的基本功能。

你可以将代码复制在掘金社区的代码片段里运行~

Javascript轮播图demo ｜ 青训营

Javascript轮播图demo ｜青训营