自定义 jQuery 轮播转换错误

Question

我正在使用 jQuery 和 CSS 制作自定义图像轮播。出于性能的原因，我试图避免使用从 Github 下载的 multiple-features 轮播插件。

我的目标是获得垂直过渡，就像 www.pcgarage.ro 上的那样，但不使用他们（可能）使用过的插件。为此，我写了：

var $elm = $('.slider'),
  $slidesContainer = $elm.find('.slider-container'),
  slides = $slidesContainer.children('a'),
  slidesCount = slides.length,
  slideHeight = $(slides[0]).find('img').outerHeight(false);

//Set slide height
$(slides).css('height', slideHeight);

// Append bullets
for (var i = 0; i < slidesCount; i++) {
  var bullets = '<a href="#">' + i + '</a>';
  if (i == 0) {
    // active bullet
    var bullets = '<a href="#" class="activeSlide">' + i + '</a>';
    // active slide
    $(slides[0]).addClass('active');
  }
  $('.slider-nav').append(bullets);
}

// Set (initial) z-index for each slide
var setZindex = function() {
  for (var i = 0; i < slidesCount; i++) {
    $(slides[i]).css('z-index', slidesCount - i);
  }
}
setZindex();

$('.slider-nav a').on('click', function() {
  activeIdx = $(this).text();
  $('.slider-nav a').removeClass('activeSlide');
  $(this).addClass('activeSlide');
  setActiveSlide();
  slideUpDown();
});

var setActiveSlide = function() {
  $(slides).removeClass('active');
  $(slides[activeIdx]).addClass('active');
}

var slideUpDown = function() {
  // set top property for all the slides
  $(slides).css('top', slideHeight);
  // then animate to the next slide
  $(slides[activeIdx]).animate({
    'top': 0
  });
}

body {
  margin: 0;
  padding: 0;
}

body * {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.slider {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider .slider-nav {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 30;
}

.slider .slider-nav a {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 3px;
  text-indent: -9999px;
  background: #fff;
}

.slider .slider-nav a.activeSlide {
  background: transparent;
  border: 2px solid #fff;
}

.slider .slider-container {
  width: 100%;
  text-align: center;
}

.slider .slider-container a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.slider .slider-container img {
  transform: translateX(-50%);
  margin-left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="slider slider-homepage">
    <div class="slider-nav"></div>
    <div class="slider-container">
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=north" alt="">
      </a>
    </div>
  </div>
</div>

我的代码的问题是伴随着每次转换的（明显的）白屏，我不明白其原因。

我的错误在哪里？

Answer 1

我添加了一些变量和函数来解决这个问题，请检查脚本。

var $elm = $('.slider'),
        $slidesContainer = $elm.find('.slider-container'),
        slides = $slidesContainer.children('a'),
        slidesCount = slides.length,
        slideHeight = $(slides[0]).find('img').outerHeight(false);
    
    //Set slide height
    $(slides).css('height', slideHeight);
    
    // Append bullets
    for (var i = 0; i < slidesCount; i++) {
        var bullets = '<a href="#">' + i + '</a>';
        if (i == 0) {
            // active bullet
            var bullets = '<a href="#" class="activeSlide">' + i + '</a>';
            // active slide
            $(slides[0]).addClass('active');
        }
        $('.slider-nav').append(bullets);
    }
    
    // Set (initial) z-index for each slide
    var setZindex = function () {
        for (var i = 0; i < slidesCount; i++) {
            $(slides[i]).css('z-index', slidesCount - i);
        }
    }
    setZindex();
    
    var displayImageBeforeClick = null;
    
    $('.slider-nav a').on('click', function () {
        displayImageBeforeClick = $(".slider-container .active");
        activeIdx = $(this).text();
        if($(slides[activeIdx]).hasClass("active")){ return false; }
        $('.slider-nav a').removeClass('activeSlide');
        $(this).addClass('activeSlide');
        setActiveSlide();
        slideUpDown();
    });
    
    var setActiveSlide = function () {
        $(slides).removeClass('active');
        $(slides[activeIdx]).addClass('active');
    }
    
    var slideUpDown = function () {
        // set top property for all the slides
        $(slides).not(displayImageBeforeClick).css('top', slideHeight);
        // then animate to the next slide
        $(slides[activeIdx]).animate({
            'top': 0
        });
    
        $(displayImageBeforeClick).animate({
            'top': "-100%"
        });
    }

body {
  margin: 0;
  padding: 0;
}

body * {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.slider {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider .slider-nav {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 30;
}

.slider .slider-nav a {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 3px;
  text-indent: -9999px;
  background: #fff;
}

.slider .slider-nav a.activeSlide {
  background: transparent;
  border: 2px solid #fff;
}

.slider .slider-container {
  width: 100%;
  text-align: center;
}

.slider .slider-container a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.slider .slider-container img {
  transform: translateX(-50%);
  margin-left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="container">
  <div class="slider slider-homepage">
    <div class="slider-nav"></div>
    <div class="slider-container">
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=north" alt="">
      </a>
    </div>
  </div>
</div>

Answer 2

使用过渡持续时间和过渡定时功能将过渡添加到您的“.slider .slider-container a”......作为参考，您可以看到https://www.w3schools.com/css/css3_transitions.asp