老师，为什么执行不了？

来源：5-2 自由编程

易要自律

2022-05-09 21:18:13

<!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>
        <button id="btnleft" class="btn">&lt;</button>
        <button id="btnright" class="btn">&gt;</button>
      </div>
    </div>

    <script src="./base.js"></script>
    <script>
      // console.log(BaseSlider);
      const _btn = document.querySelector('.btn');
      const btnleft = document.querySelector('#btnleft');
      const btnright = document.querySelector('#btnright');
      const sliderbox = 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();
            }
          });
        }
      }
      new Slider(sliderbox, {
        initialIndex: 1,
        animation: true,
        speed: 1000
      });
      // 作业代码
      class btn extends BaseSlider {
        constructor(el,options){
          super(el,options);
          this._bindEventLeft();
          this._bindEventRight();
          this._display();
        }
        _bindEventLeft(){
          btnleft.addEventListener('click',()=>{
            this.prev();
          })
        }
        _bindEventRight(){
          btnright.addEvenlistener('click',()=>{
            this.next();
          });
        };
        _display(){
          sliderbox.addEventListener('mouseenter',()=>{
            _btn.style.opacity = 0;
          })
          sliderbox.addEventListener('mouseleave',()=>{
            _btn.style.opacity = 1;
          })
        }
      }
      const b = new btn(document.querySelector('.slider'), {
        initialIndex: 1,
        animation: true,
        speed: 2000
      });

    </script>
  </body>
</html>

css

/* 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;
}
.slider-item {
  float: left;
}
.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}
.slider{
  position: relative;
}
.btn{
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  background-color: transparent;
  border: 0px solid black;
  border-radius: 50%;
  font-size: 40px;
  color: aliceblue;
}
#btnright {
  right:0px
}

写回答

1回答