javascript [滑块]控件#js上的渐进增强滑块和svg图标

Posted 2021-05-04

.header__slider.slider

    input.slider__input(type="radio" id="btn1" name="toggle" checked)
    input.slider__input(type="radio" id="btn2" name="toggle")
    input.slider__input(type="radio" id="btn3" name="toggle") 
    
    .slider__viewport
        ul.slider__slides
            li.slider__slide
                .slider__content 
                    h2.slider__headline Nulla consequat massa quis enim
                    p.slider__subhead 
                        | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
                    a.btn.slider__more-btn-btn(href="#") Link

            li.slider__slide
                .slider__content
                    h2.slider__headline Donec pede justo
                    p.slider__subhead 
                        | Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                    a.btn.slider__more-btn-btn(href="#") Link  

            li.slider__slide
                .slider__content
                    h2.slider__headline Nullam quis ante
                    p.slider__subhead 
                        | Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
                    a.btn.slider__more-btn-btn(href="#") Link

        .slider__control
            label.slider__btn(for="btn1")
                svg.slider__btn-icon(width="30")
                    use(xlink:href="#circle")
                svg.slider__btn-icon(width="30")
                    use(xlink:href="#circle-dot")

            label.slider__btn(for="btn2")
                svg.slider__btn-icon(width="30")
                    use(xlink:href="#circle")
                svg.slider__btn-icon(width="30")
                    use(xlink:href="#circle-dot")

            label.slider__btn(for="btn3")
                svg.slider__btn-icon(width="30")
                    use(xlink:href="#circle") 
                svg.slider__btn-icon(width="30")
                    use(xlink:href="#circle-dot")

@layout-size: 880px;
@color-slider-control: #c1c1c1;

.slider {
  overflow: hidden;
  padding-top: 47px;

  &__viewport {
    overflow: hidden;
    margin: 0 auto;
    min-height: 300px;
    width: @layout-size;
  }

  &__slides {
    position: relative;
    margin: 0;
    padding: 0;
    width: @layout-size * 3;
    list-style: none;
  }

  &__slide {
    position: relative;
    float: left;
    width: @layout-size;
    vertical-align: top;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      background-image: url("../images/sprite.png");
      content: "";
    }

    &:nth-child(1)::before {
      width: 0;
      height: 0;
      background-position: 0 0;
    }

    &:nth-child(2)::before {
      width: 0;
      height: 0;
      background-position: 0 0;
    }

    &:nth-child(3)::before {
      width: 0;
      height: 0;
      background-position: 0 0;
    }
  }

  &__content {
    padding-top: 20px;
    width: 400px;
  }

  &__headline {
    margin-top: 0;
    margin-bottom: 16px;
    padding-top: 0px;
    font-weight: 500;
    line-height: 1;
  }

  &__subhead {
    margin-top: 0;
    margin-bottom: 28px;
  }

  &__more-btn-btn {
    width: 240px;
  }

  &__control {
    position: relative;
    top: 8px;
    left: 405px;
  }

  &__btn {
    position: relative;
    display: inline-block;
    margin-right: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  &__input {
    display: none;
  }

  &__btn-icon {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    fill: @color-slider-control;

    &:last-child {
      display: none;
    }
  }
}

// Button 1
#btn1:checked ~ .slider__viewport .slider__slides {
  transform: translateX(0);
}

#btn1:checked ~ .slider__viewport .slider__btn:nth-child(1) .slider__btn-icon:first-child {
  display: none;
}

#btn1:checked ~ .slider__viewport .slider__btn:nth-child(1) .slider__btn-icon:last-child {
  display: block;
}

// Button 2
#btn2:checked ~ .slider__viewport .slider__slides {
  transform: translateX(-@layout-size);
}

#btn2:checked ~ .slider__viewport .slider__btn:nth-child(2) .slider__btn-icon:first-child {
  display: none;
}

#btn2:checked ~ .slider__viewport .slider__btn:nth-child(2) .slider__btn-icon:last-child {
  display: block;
}

// Button 3
#btn3:checked ~ .slider__viewport .slider__slides {
  transform: translateX(-@layout-size * 2);
}

#btn3:checked ~ .slider__viewport .slider__btn:nth-child(3) .slider__btn-icon:first-child {
  display: none;
}

#btn3:checked ~ .slider__viewport .slider__btn:nth-child(3) .slider__btn-icon:last-child {
  display: block;
}

var slider = ".slider",
  slides = ".slider__slides",
  $slides = $(slides),
  $viewport = $(".slider__viewport"),
  slideCount = $(".slider__slides").children().length,
  btn = ".slider__btn",
  icon = ".slider__btn-icon",
  input = ".slider__input",
  translateWidth = $viewport.width(),
  slideNow = 1,
  clickCount = 0,
  duration = 700,
  interval = 4000;

function slideShow() {
  if (slideNow === slideCount) {
    $slides
      .animate({ opacity: 0 }, duration)
      .animate(
        { right: "-=" + translateWidth * (slideCount - 1) / 16 + "rem" },
        0
      )
      .animate({ opacity: 1 }, duration);
    slideNow = 1;
    $(icon + ":last-child").fadeOut(duration);
    $(btn + ":first-child" + " " + icon + ":last-child").fadeIn(duration);
  } else {
    $slides
      .animate({ opacity: 0 }, duration)
      .animate({ right: "+=" + translateWidth / 16 + "rem" }, 0)
      .animate({ opacity: 1 }, duration);
    slideNow++;
    $(icon + ":last-child").fadeOut(duration);
    $(btn + ":nth-child(" + slideNow + ")" + " " + icon + ":last-child").fadeIn(
      duration
    );
  }
}

$(document).ready(function() {
  var switchInterval;

  function intervalHandler() {
    switchInterval = setInterval(function() {
      if (document.visibilityState === "visible") {
        slideShow();
      } else {
        return;
      }
    }, interval);
  }

  intervalHandler();

  $viewport.hover(
    function() {
      clearInterval(switchInterval);
    },
    function() {
      intervalHandler();
    }
  );

  $(input).prop("checked", false);
  $(btn + ":first-child" + " " + icon + ":last-child").fadeIn(duration);

  $(btn)
    .css("cursor", "pointer")
    .click(function(e) {
      e.preventDefault();
      clickCount += 1;
      var btnId = $(this).index() + 1;

      function clickEvent(direction) {
        $slides
          .animate({ opacity: 0 }, duration)
          .animate(
            { right: direction + translateStep * translateWidth / 16 + "rem" },
            0,
            function() {
              $(icon + ":last-child").fadeOut(duration);
              $(
                btn + ":nth-child(" + btnId + ")" + " " + icon + ":last-child"
              ).fadeIn(duration);
              slideNow = btnId;
              clickCount = 0;
            }
          )
          .animate({ opacity: 1 }, duration);
      }

      if (slideNow != btnId && clickCount == 1) {
        if (btnId > slideNow) {
          var translateStep = btnId - slideNow;
          clickEvent("+=");
        }
        if (btnId < slideNow) {
          var translateStep = slideNow - btnId;
          clickEvent("-=");
        }
      } else {
        clickCount = 0;
      }
    });
});