【JS制作网页示例】下述代码实现了一个垂直滑动的效果，包含左侧的文字滑块和右侧的背景图片滑块。用户可以通过点击上下按钮来切换滑块。

本文链接：https://blog.csdn.net/2201_76060199/article/details/142187156

下述代码实现了一个垂直滑动的效果，包含左侧的文字滑块和右侧的背景图片滑块。用户可以通过点击上下按钮来切换滑块。以下是对代码的详细分析解释：

HTML结构

基本结构：
- <!DOCTYPE html> 声明文档类型为 HTML5。
- <html lang="en"> 指定文档语言为英语。
- <head> 部分包含元信息、样式和标题。
- <body> 部分是页面的主要内容。
主要元素：
- <div class="slider-container">：滑块容器，包含左侧和右侧滑块以及动作按钮。
- <div class="left-slide">：左侧滑块，包含多个 <div>，每个 <div> 内有标题和段落。
- <div class="right-slide">：右侧滑块，包含多个 <div>，每个 <div> 设定了背景图片（当前为空 URL）。
- <div class="action-buttons">：包含上下两个按钮，用于切换滑块。

CSS样式

全局样式：
- * { box-sizing: border-box; margin: 0; padding: 0; }：设置所有元素的盒模型、外边距和内边距。
- body { font-family: 'Open Sans', sans-serif; height: 100vh; }：设置字体和页面高度。
滑块容器：
- .slider-container { position: relative; overflow: hidden; width: 100vw; height: 100vh; }：相对定位，隐藏溢出内容，设置宽度和高度。
左侧滑块：
- .left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; transition: transform 0.5s ease-in-out; }：绝对定位，设置宽度、高度和过渡效果。
- .left-slide > div { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }：每个子 <div> 的布局和样式。
右侧滑块：
- .right-slide { height: 100%; position: absolute; top: 0; left: 35%; width: 65%; transition: transform 0.5s ease-in-out; }：绝对定位，设置宽度、高度和过渡效果。
- .right-slide > div { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%; }：每个子 <div> 的背景图片样式。
按钮样式：
- button { background-color: #fff; border: none; color: #aaa; cursor: pointer; font-size: 16px; padding: 15px; }：基础按钮样式。
- .slider-container .action-buttons button { position: absolute; left: 35%; top: 50%; z-index: 100; }：按钮的绝对定位。
- .down-button 和 .up-button：分别设置上下按钮的样式和位置。

JavaScript功能

获取元素：
- const sliderContainer = document.querySelector('.slider-container')
- const slideRight = document.querySelector('.right-slide')
- const slideLeft = document.querySelector('.left-slide')
- const upButton = document.querySelector('.up-button')
- const downButton = document.querySelector('.down-button')
- const slidesLength = slideRight.querySelectorAll('div').length
初始化状态：
- let activeSlideIndex = 0：当前活动的滑块索引。
- slideLeft.style.top = -${(slidesLength - 1) * 100}vh``：初始化左侧滑块的位置。
按钮事件监听：
- upButton.addEventListener('click', () => changeSlide('up'))
- downButton.addEventListener('click', () => changeSlide('down'))
切换滑块函数：
- const changeSlide = (direction) => { ... }：根据方向参数切换滑块。
- 通过修改 activeSlideIndex 来更新当前活动的滑块。
- 使用 translateY 设置滑块的位置，实现平滑过渡。

总结

该代码实现了一个垂直的滑块效果，用户可以通过点击上下按钮来切换滑块。左侧滑块显示标题和描述，右侧滑块显示背景图片。CSS 用于布局和样式，JavaScript 用于处理用户交互和滑块动画。需要注意的是，右侧滑块的背景图片 URL 需要实际使用时填充有效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
      <style>
          * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
          }

          body {
              font-family: 'Open Sans', sans-serif;
              height: 100vh;
          }

          .slider-container {
              position: relative;
              overflow: hidden;
              width: 100vw;
              height: 100vh;
          }

          .left-slide {
              height: 100%;
              width: 35%;
              position: absolute;
              top: 0;
              left: 0;
              transition: transform 0.5s ease-in-out;
          }

              .left-slide > div {
                  height: 100%;
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  color: #fff;
              }

              .left-slide h1 {
                  font-size: 40px;
                  margin-bottom: 10px;
                  margin-top: -30px;
              }

          .right-slide {
              height: 100%;
              position: absolute;
              top: 0;
              left: 35%;
              width: 65%;
              transition: transform 0.5s ease-in-out;
          }

              .right-slide > div {
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  height: 100%;
                  width: 100%;
              }

          button {
              background-color: #fff;
              border: none;
              color: #aaa;
              cursor: pointer;
              font-size: 16px;
              padding: 15px;
          }

              button:hover {
                  color: #222;
              }

              button:focus {
                  outline: none;
              }

          .slider-container .action-buttons button {
              position: absolute;
              left: 35%;
              top: 50%;
              z-index: 100;
          }

          .slider-container .action-buttons .down-button {
              transform: translateX(-100%);
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
          }

          .slider-container .action-buttons .up-button {
              transform: translateY(-100%);
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
          }

      </style>
    <title>Vertical Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div class="left-slide">
        <div style="background-color: #FD3555">
          <h1>Nature flower</h1>
          <p>all in pink</p>
        </div>
        <div style="background-color: #2A86BA">
          <h1>Bluuue Sky</h1>
          <p>with it's mountains</p>
        </div>
        <div style="background-color: #252E33">
          <h1>Lonely castle</h1>
          <p>in the wilderness</p>
        </div>
        <div style="background-color: #FFB866">
          <h1>Flying eagle</h1>
          <p>in the sunset</p>
        </div>
      </div>
      <div class="right-slide">
        <div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></div>
      </div>
      <div class="action-buttons">
        <button class="down-button">
          <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
          <i class="fas fa-arrow-up"></i>
        </button>
      </div>
    </div>

    <script>
        const sliderContainer = document.querySelector('.slider-container')
        const slideRight = document.querySelector('.right-slide')
        const slideLeft = document.querySelector('.left-slide')
        const upButton = document.querySelector('.up-button')
        const downButton = document.querySelector('.down-button')
        const slidesLength = slideRight.querySelectorAll('div').length

        let activeSlideIndex = 0

        slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`

        upButton.addEventListener('click', () => changeSlide('up'))
        downButton.addEventListener('click', () => changeSlide('down'))

        const changeSlide = (direction) => {
            const sliderHeight = sliderContainer.clientHeight
            if (direction === 'up') {
                activeSlideIndex++
                if (activeSlideIndex > slidesLength - 1) {
                    activeSlideIndex = 0
                }
            } else if (direction === 'down') {
                activeSlideIndex--
                if (activeSlideIndex < 0) {
                    activeSlideIndex = slidesLength - 1
                }
            }

            slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
            slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
        }
    </script>
  </body>
</html>

的图片 URL。