麻烦老师检查，谢谢

来源：5-2 自由编程

Yuri沫

2022-05-02 12:47:30

<!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="arrow arrow-left">&lt;</div>
            <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="arrow arrow-right">&gt;</div>
        </div>
    </div>

    <script src="./base.js"></script>
    <script>
        var arrowLeft = document.querySelector(".arrow-left");
        var arrowRight = document.querySelector(".arrow-right");
        class Slider extends BaseSlider{
            constructor(el, options){
                super(el, options);

                this._blindEvent();
            }

            _blindEvent(){
                arrowLeft.addEventListener("click", e => {
                    this.prev();
                });

                arrowRight.addEventListener("click", e => {
                    this.next();
                });
            }
        }

        new Slider(document.querySelector(".slider"), {
            initialIndex: 1,
            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: 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 .arrow{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    cursor: pointer;
    z-index: 9999;
}
.slider .arrow:hover{
    background-color: rgba(255,255,255,0.5);
}
.slider .arrow-left{
    left: 10px;
}
.slider .arrow-right{
    right: 10px;
}

写回答

1回答