请老师检查代码♥

来源：5-2 自由编程
xcn_aaaa
2022-10-25 19:32:25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Class 的应用</title>
    <link rel="stylesheet" href="./slider.css" />
    <style>
      .slider {
        position: relative;
      }
      .leftbtn {
        position: absolute;
        left: 0;
        top: 50%;
        margin-right: -25px;
        width: 50px;
        height: 50px;
        border-radius: 30px;
        color: #000;
        background-color: rgba(255, 255, 255, 0.5);
        font-size: 40px;
        line-height: 50px;
        text-align: center;
        z-index: 999;
        display: none;
      }
      .rightbtn {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        border-radius: 30px;
        color: #000;
        background-color: rgba(255, 255, 255, 0.5);
        font-size: 40px;
        line-height: 50px;
        text-align: center;
        z-index: 999;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="slider-layout">
      <div class="slider">
        <a href="javascript:;" class="leftbtn" id = "leftbtn">&lt;</a>
        <a href="javascript:;" class="rightbtn" id = "rightbtn">&gt;</a>
        <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>
      </div>
    </div>

    <script src="./base.js"></script>
    <script>
      const leftbtn = document.getElementById('leftbtn');
      const rightbtn = document.getElementById('rightbtn');

      // console.log(BaseSlider);

      // 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(document.querySelector('.slider'), {
        // initialIndex: 1,
        // animation: true,
        // speed: 1000
      // });
      class Slider extends BaseSlider {
        constructor(el, options) {
          super(el, options);

          this._bindEvent();
        }

        _bindEvent() {
          leftbtn.addEventListener('click',()=>{
            this.prev();
          })
          rightbtn.addEventListener('click',()=>{
            this.next();
          })
        }
      }
      const slider = document.querySelector('.slider')
      new Slider(slider,{
        initialIndex: 1,
        animation: true,
        speed: 2000
      });

      slider.onmouseover = ()=>{
        rightbtn.style.display = 'block';
        leftbtn.style.display = 'block';
      }

      slider.onmouseout = ()=>{
        rightbtn.style.display = 'none';
        leftbtn.style.display = 'none';
      }

    </script>
  </body>
</html>
写回答
1回答