代码介绍

这段JavaScript代码实现了一个网页人物推荐列表的滑动切换功能。它可以根据不同设备的屏幕尺寸自适应地展示人物推荐列表。该功能通过监听用户对左右箭头按钮的点击事件，来实现滑动切换人物推荐列表。

该代码主要包含了以下几个步骤：

  1. 获取HTML元素：使用JavaScript获取人物推荐列表的HTML元素，包括slide-list、slide-item和slide-arrow元素。
  2. 计算滑动元素的宽度：根据slide-item数量计算每个slide-item元素的宽度百分比，并设置slide-list元素的宽度，使所有slide-item元素能够完整地展示在屏幕上。
  3. 水平排列slide-item元素：根据每个slide-item元素的宽度百分比，依次排列各项slide-item元素，并设置每个slide-item元素在水平方向上的left属性值，使其按照顺序水平排列。
  4. 定义滑动函数：定义一个名为slide(direction)的函数，该函数接受一个参数direction用于指定滑动方向。在函数中，获取当前激活的slide-item元素和其对应的ID，并根据滑动方向计算新的slide-item元素并将其设为激活状态。
  5. 给箭头按钮添加事件监听器：通过JavaScript为左右箭头按钮添加点击事件监听器，当箭头按钮被点击时，调用slide(direction)函数来实现人物推荐列表的滑动切换。

通过使用该代码，您可以实现网页人物推荐列表的自适应滑动切换功能，增强您网站的交互性和用户体验。

使用方法

将以下代码保存为一个JS文件，并将其引入您的HTML文档中：

// 获取HTML元素
var slideList = document.querySelector(".slide-list");
var slideItemIDs = [];
var slideItems = document.querySelectorAll(".slide-item");

// 获取所有slide-items的ID并将其储存到数组中
slideItems.forEach(function(slideItem) {
   slideItemIDs.push(slideItem.id);
});

// 计算slide-item所占的宽度百分比
var itemWidth = (100 / slideItems.length).toFixed(2);

// 根据slide-item数量设置slide-list的宽度
slideList.style.width = (slideItems.length * 100) + "%";

// 让每个slide-item按照宽度百分比水平排列
for (var i = 0; i < slideItems.length; i++) {
   slideItems[i].style.width = itemWidth + "%";
   slideItems[i].style.left = (i * itemWidth) + "%";
}

// 定义一个函数，用于滑动slide-list
function slide(direction) {
   var activeItem = document.querySelector(".slide-item.active");
   var activeIndex = slideItemIDs.indexOf(activeItem.id);

   // 如果向右滑动，则将当前slide-item左侧的一个激活
   if (direction === "right") {
      var newIndex = activeIndex - 1 >= 0 ? activeIndex - 1 : slideItems.length - 1;
      var newItem = document.getElementById(slideItemIDs[newIndex]);
      activeItem.classList.remove("active");
      newItem.classList.add("active");
   }
   // 如果向左滑动，则将当前slide-item右侧的一个激活
   else if (direction === "left") {
      var newIndex = activeIndex + 1 < slideItems.length ? activeIndex + 1 : 0;
      var newItem = document.getElementById(slideItemIDs[newIndex]);
      activeItem.classList.remove("active");
      newItem.classList.add("active");
   }
}

// 给向左和向右的按钮添加事件监听器
document.querySelector(".slide-arrow.left").addEventListener("click", function() {
   slide("left");
});

document.querySelector(".slide-arrow.right").addEventListener("click", function() {
   slide("right");
});

在您的HTML文档中，添加以下代码来构建人物推荐列表：

<div class="slide-wrapper">
   <ul class="slide-list">
      <li class="slide-item active" id="slide-item-1">
         <h2>人物1</h2>
         <p>简介1</p>
      </li>
      <li class="slide-item" id="slide-item-2">
         <h2>人物2</h2>
         <p>简介2</p>
      </li>
      <li class="slide-item" id="slide-item-3">
         <h2>人物3</h2>
         <p>简介3</p>
      </li>
      <li class="slide-item" id="slide-item-4">
         <h2>人物4</h2>
         <p>简介4</p>
      </li>
   </ul>
   <div class="slide-arrow left"></div>
   <div class="slide-arrow right"></div>
</div>

在您的CSS文档中，添加以下样式代码来控制人物推荐列表的外观：

.slide-wrapper {
   position: relative;
   overflow: hidden;
}
.slide-list {
   display: flex;
   position: relative;
   transition: all 0.5s ease;
}
.slide-item {
   position: absolute;
   top: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: all 0.5s ease;
   opacity: 0.5;
   transform: scale(0.9);
}
.slide-item.active {
   opacity: 1;
   transform: scale(1);
}
.slide-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   background-color: #fff;
   border-radius: 50%;
   box-shadow: 0 2px 2px rgba(0,0,0,0.1);
   cursor: pointer;
   transition: all 0.2s ease;
}
.slide-arrow:before {
   content: "";
   position: absolute;
   width: 20px;
   height: 20px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg);
   border-right: 2px solid #444;
   border-bottom: 2px solid #444;
}
.slide-arrow.left:before {
   transform: translate(-50%, -50%) rotate(-135deg);
}
.slide-arrow:hover {
   transform: scale(1.1);
}
.slide-arrow.left {
   left: 30px;
}
.slide-arrow.right {
   right: 30px;
}

说明：您需要修改上述代码，使其适配您的HTML页面结构和样式要求。