基于JS实现仿百度百家主页的轮播图效果-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，轮播图是非常常见的一种交互效果。本文将介绍如何使用JavaScript实现一个类似于百度百家主页的轮播图效果，并附带详细的代码示例和解释。

准备工作

在开始实现轮播图之前，我们需要先准备好以下内容：

一些图片资源，用于轮播图的展示。
一个具有固定宽高比的父容器，用于显示轮播图。

HTML结构

我们可以使用一个无序列表（ul）来表示轮播图中的多张图片，每个列表项（li）中包含一张图片。同时，为了实现左右箭头的切换功能，我们还需要添加两个按钮。

-- -------------------- ---- -------
---- -------------------------
  --- --------------------
    -------- --------------- ------------
    -------- --------------- ------------
    -------- --------------- ------------
  -----
  ------- -------------------------
  ------- -------------------------
------

CSS样式

我们需要为轮播图容器和列表项设置一些基本样式。其中，容器需要具有固定宽高比，且内部的内容要水平居中。此外，我们还需要为左右箭头设置样式。

-- -------------------- ---- -------
----------------- -
  --------- ---------
  ------ -----
  ------- --
  --------------- ------- -- ------- --
  --------- -------
-

------------ -
  --------- ---------
  ---- --
  ----- --
  ------ -----
  ------- -----
  ------- --
  -------- --
  ----------- -----
  -------- -----
  ---------------- -------
  ------------ -------
-

------------ -- -
  ----- - - -----
-

------
----- -
  --------- ---------
  ---- ----
  ---------- -----------------
  ------ -----
  ------- -----
  ----------------- ------- -- -- -----
  ------ -----
  ------- -----
  -------- -----
  ------- --------
-

----- -
  ----- -----
-

----- -
  ------ -----
-

JavaScript实现

接下来，我们开始使用JavaScript实现轮播图功能。

步骤1：获取DOM元素

首先，需要获取到关键的DOM元素：轮播图容器、图片列表、左右箭头按钮。

const container = document.querySelector('.slider-container');
const list = document.querySelector('.slider-list');
const items = document.querySelectorAll('.slider-list li');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

步骤2：初始化轮播图位置

为了方便后续计算和操作，我们需要初始化轮播图的位置。将第一张图片移到最左边，其他图片放到右侧。

-- -------------------- ---- -------
--- ---------- - --
----- --------- - ---------------------

-------------------- ------ -- -
  -- ------ --- -- -
    --------------- - -------- - --------------
  -
---

---------------- - --------------- - --------------

步骤3：添加事件监听器

接下来，我们需要为左右箭头按钮添加点击事件监听器。当用户点击按钮时，我们会通过JavaScript将轮播图切换到下一张或上一张。

prevBtn.addEventListener('click', () => {
  if (currentIdx > 0) {
    currentIdx--;

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1581) ，转载请注明来源
[https://www.javascriptcn.com/post/1581](https://www.javascriptcn.com/post/1581)

基于JS实现仿百度百家主页的轮播图效果

目录