老师，为啥我这个右按钮不生效？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Class 的应用</title>
  <link rel="stylesheet" href="./slider.css" />
</head>

<body>
  <div class="slider-layout">
    <div class="slider">
      <div class="slider-content">
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
        </div>
      </div>
      <a class="btn" id="leftBtn" href="javascript:;">&lt;</a>
      <a class="btn" id="rightBtn" href="javascript:;">&gt;</a>
    </div>
  </div>

  <script src="./base.js"></script>
  <script>
    // console.log(BaseSlider);
    const leftBtn = document.getElementById('leftBtn');
    const rightBtn = document.getElementById('rightBtn');
    const box = document.querySelector('.slider');

    class Slider extends BaseSlider {
      constructor(el, options) {
        super(el, options);

        this._bindEvent();
      }

      _bindEvent() {
        document.addEventListener('keyup', ev => {
          // console.log(ev.keyCode);
          if (ev.keyCode === 37) {
            // ←
            this.prev();
          } else if (ev.keyCode === 39) {
            // →
            this.next();
          }
        });
        leftBtn.addEventListener('click', () => {
          this.prev();
        }, false);
        rightBtn.addEventListener('click', () => {
          this.next();
        }, false);
        // box.addEventListener('mousemove', () => {
        //   document.querySelector('.slider-layout .slider .btn').style.display = 'block';
        // }, false);
        box.onmousemove = function () {
          document.querySelector('.slider-layout .slider .btn').style.display = 'block';
        };
        // box.addEventListener('mouseleave', () => {
        //   document.querySelector('.slider-layout .slider .btn').style.display = 'none';
        // }, false);
        box.onmouseleave = function () {
          document.querySelector('.slider-layout .slider .btn').style.display = 'none';
        };
      }
    }
    new Slider(document.querySelector('.slider'), {
      initialIndex: 1,
      animation: true,
      speed: 2000
    });
  </script>
</body>

</html>

张小阳_ 2022-11-10

源自：Class 类 5-2 自由编程

收起

2回答

好帮手慕星星 2022-11-11 09:55:26

同学你好，代码中querySelector方法只获取一个元素，所以只给左按钮设置上了样式

建议直接改为id获取的元素设置

祝学习愉快！

收起回答

提问者张小阳_ #1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Class 的应用</title>
  <link rel="stylesheet" href="./slider.css" />
</head>

<body>
  <div class="slider-layout">
    <div class="slider">
      <div class="slider-content">
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
        </div>
      </div>
      <a class="btn" id="leftBtn" href="javascript:;">&lt;</a>
      <a class="btn" id="rightBtn" href="javascript:;">&gt;</a>
    </div>
  </div>

  <script src="./base.js"></script>
  <script>
    // console.log(BaseSlider);
    const leftBtn = document.getElementById('leftBtn');
    const rightBtn = document.getElementById('rightBtn');
    const box = document.querySelector('.slider');

    class Slider extends BaseSlider {
      constructor(el, options) {
        super(el, options);

        this._bindEvent();
      }

      _bindEvent() {
        document.addEventListener('keyup', ev => {
          // console.log(ev.keyCode);
          if (ev.keyCode === 37) {
            // ←
            this.prev();
          } else if (ev.keyCode === 39) {
            // →
            this.next();
          }
        });
        leftBtn.addEventListener('click', () => {
          this.prev();
        }, false);
        rightBtn.addEventListener('click', () => {
          this.next();
        }, false);

        box.onmousemove = function () {
          leftBtn.style.display = 'block';
          rightBtn.style.display = 'block';
        };

        box.onmouseleave = function () {
          leftBtn.style.display = 'none';
          rightBtn.style.display = 'none';
        };
      }
    }
    new Slider(document.querySelector('.slider'), {
      initialIndex: 1,
      animation: true,
      speed: 2000
    });
  </script>
</body>

</html>

2022-11-12 16:27:55

好帮手慕星星回复提问者张小阳_ #2

修改的代码没问题，很棒！

2022-11-12 17:10:18

张小阳_ 提问者 2022-11-10 23:47:44

/* css reset */
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  outline: none;
}

img {
  vertical-align: top;
}

/* layout */
.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0 auto;
}

/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
}

.slider {
  overflow: hidden;
  position: relative;
}

.slider-item {
  float: left;
}

.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}

.slider-layout .slider .btn {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, .8);
  left: auto;
  top: 50%;
  margin-top: -25px;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 50px;
  color: white;
  display: none;
}

.slider-layout .slider #leftBtn {
  left: 50px;
}

.slider-layout .slider #rightBtn {
  right: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Class 的应用</title>
  <link rel="stylesheet" href="./slider.css" />
</head>

<body>
  <div class="slider-layout">
    <div class="slider">
      <div class="slider-content">
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
        </div>
      </div>
      <a class="btn" id="leftBtn" href="javascript:;">&lt;</a>
      <a class="btn" id="rightBtn" href="javascript:;">&gt;</a>
    </div>
  </div>

  <script src="./base.js"></script>
  <script>
    // console.log(BaseSlider);
    const leftBtn = document.getElementById('leftBtn');
    const rightBtn = document.getElementById('rightBtn');
    const box = document.querySelector('.slider');

    class Slider extends BaseSlider {
      constructor(el, options) {
        super(el, options);

        this._bindEvent();
      }

      _bindEvent() {
        document.addEventListener('keyup', ev => {
          // console.log(ev.keyCode);
          if (ev.keyCode === 37) {
            // ←
            this.prev();
          } else if (ev.keyCode === 39) {
            // →
            this.next();
          }
        });
        leftBtn.addEventListener('click', () => {
          this.prev();
        }, false);
        rightBtn.addEventListener('click', () => {
          this.next();
        }, false);
        // box.addEventListener('mousemove', () => {
        //   document.querySelector('.slider-layout .slider .btn').style.display = 'block';
        // }, false);
        box.onmousemove = function () {
          document.querySelector('.slider-layout .slider .btn').style.display = 'block';
        };
        // box.addEventListener('mouseleave', () => {
        //   document.querySelector('.slider-layout .slider .btn').style.display = 'none';
        // }, false);
        box.onmouseleave = function () {
          document.querySelector('.slider-layout .slider .btn').style.display = 'none';
        };
      }
    }
    new Slider(document.querySelector('.slider'), {
      initialIndex: 1,
      animation: true,
      speed: 2000
    });
  </script>
</body>

</html>

收起回答