告别左右滑动！将百度新闻轮播图的左右切换按钮魔改成上下切换按钮

2024-01-26 08:09:17

之前，我们已经成功地将百度新闻同款悬浮变形的左右切换按钮“实现”了出来，其实就是照抄浏览器解析出来的相关的CSS样式。这一对按钮左右分布，平时不显，低调做人，简约端庄。一旦鼠标指针悬浮于上，箭头就会用一个动效的时间，随着你的手势，如影随形，有一种若隐若现的感觉。左右切换按钮固然好用，但在实际的使用过程中，我发现了一个小问题。

左右切换按钮的局限性

左右切换按钮有一个局限性，就是当轮播图只有一张图片时，左右切换按钮就失去了作用，因为此时轮播图没有下一张或上一张图片可以切换。而且，左右切换按钮在移动端并不是很友好，因为移动端的屏幕空间有限，左右切换按钮很容易被手指挡住。

上下切换按钮的优势

为了解决左右切换按钮的局限性，我决定将百度新闻轮播图的左右切换按钮魔改成上下切换按钮。上下切换按钮具有以下几个优势：

当轮播图只有一张图片时，上下切换按钮仍然可以正常工作，因为轮播图可以上下循环滚动。
上下切换按钮在移动端更加友好，因为上下切换按钮位于屏幕的顶部和底部，不容易被手指挡住。
上下切换按钮可以更加直观地反映轮播图的滚动方向，因为轮播图是上下滚动的，而左右切换按钮是左右滚动的。

如何将左右切换按钮魔改成上下切换按钮

将百度新闻轮播图的左右切换按钮魔改成上下切换按钮，需要修改以下几个地方：

HTML代码：将左右切换按钮的HTML代码修改为上下切换按钮的HTML代码。
CSS代码：将左右切换按钮的CSS代码修改为上下切换按钮的CSS代码。
JavaScript代码：将左右切换按钮的JavaScript代码修改为上下切换按钮的JavaScript代码。

HTML代码

将以下代码添加到百度新闻轮播图的HTML代码中：

<div class="arrow-up"></div>
<div class="arrow-down"></div>

CSS代码

将以下代码添加到百度新闻轮播图的CSS代码中：

.arrow-up {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
}

.arrow-down {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
}

JavaScript代码

将以下代码添加到百度新闻轮播图的JavaScript代码中：

// 获取上下切换按钮
const arrowUp = document.querySelector('.arrow-up');
const arrowDown = document.querySelector('.arrow-down');

// 获取轮播图
const carousel = document.querySelector('.carousel');

// 获取轮播图中的图片
const slides = carousel.querySelectorAll('.slide');

// 获取轮播图的当前索引
let currentIndex = 0;

// 上下切换按钮的点击事件监听器
arrowUp.addEventListener('click', () => {
  // 如果当前索引不是0，则将当前索引减1
  if (currentIndex > 0) {
    currentIndex--;
  }

  // 将轮播图的当前索引设置为currentIndex
  carousel.setAttribute('data-current', currentIndex);
});

arrowDown.addEventListener('click', () => {
  // 如果当前索引不是轮播图中图片的数量减1，则将当前索引加1
  if (currentIndex < slides.length - 1) {
    currentIndex++;
  }

  // 将轮播图的当前索引设置为currentIndex
  carousel.setAttribute('data-current', currentIndex);
});