老师检查一下代码

来源：5-2 自由编程

3颗猫饼干

2021-12-20 11:26:45

相关代码：

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

<head>
    <meta charset="UTF-8" />
    <title>5-2: 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>
            <!-- 左按钮 -->
            <div class="left-btn" id="leftbtn">
                <div class="left-arrow"></div>
            </div>
            <!-- 右按钮 -->
            <div class="right-btn" id="rightbtn">
                <div class="right-arrow"></div>
            </div>
        </div>
    </div>

    <script src="./base.js"></script>
    <script>
        // 通过querySelect方法，获取左右按钮和大盒子元素。
        const slider = document.querySelector('.slider');
        const leftbtn = document.getElementById('leftbtn');
        const rightbtn = document.getElementById('rightbtn');

        // 通过class的extends方式继承基类BaseSlider。
        class Slider extends BaseSlider {
            constructor(el, options) {
                super(el, options)
                console.log(this);
                this.leftEvent()
                this.rightEvent()
            }
            // 左按钮点击事件函数
            leftEvent() {
                leftbtn.addEventListener(
                    'click',
                    () => {
                        console.log(this);
                        this.prev();
                    }
                )
            }
            // 右按钮点击事件
            rightEvent() {
                rightbtn.addEventListener(
                    'click',
                    () => {
                        // console.log('next');
                        this.next()
                    }
                )
            }

        }
        // 鼠标移入事件
        slider.addEventListener(
            'mouseenter',
            function () {
                // console.log('yiru');
                leftbtn.style.display = 'block'
                rightbtn.style.display = 'block'
            }
        )
        // 鼠标移出事件
        slider.addEventListener(
            'mouseleave',
            function () {
                // console.log('yichu');
                leftbtn.style.display = 'none'
                rightbtn.style.display = 'none'
            }
        )
        new Slider(document.querySelector('.slider'), {
            // 初始索引
            initialIndex: 2,
            // 切换时是否有动画
            animation: true,
            // 切换速度，单位 ms
            speed: 2000
        })


    //   // 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,  //false 就是没有动画
    //     speed: 1000
    //   });
    </script>
</body>

</html>

相关代码：

/* css reset */
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  vertical-align: top;
}

/* layout */
.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0px auto;
  position: relative;
  box-sizing: border-box;
}
/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
}
.slider {
  overflow: hidden;
  position: relative;
}
/* 左按钮 */
.slider .left-btn {
  width: 50px;
  height: 50px;
  background-color: rgb(206, 204, 204);
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -25px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}
.slider .left-btn .left-arrow {
  width: 20px;
  height: 20px;
  border-top: solid rgb(3, 3, 3);
  border-left: solid rgb(3, 3, 3);
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 18px;
  transform: rotate(-45deg);
}
/* 右按钮 */
.slider-layout .right-btn {
  width: 50px;
  height: 50px;
  background-color: rgb(206, 204, 204);
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -25px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}
.slider .right-btn .right-arrow {
  width: 20px;
  height: 20px;
  border-top: solid rgb(3, 3, 3);
  border-right: solid rgb(3, 3, 3);
  /* border: solid rebeccapurple; */
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 9px;
  transform: rotate(45deg);
}


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

写回答

1回答