Question

这是我的html标记：

<body> 
    <div class="slider">
        <div class="slide1">
            -- my slide 1 content --
        </div>
        <div class="slide2">
            -- my slide 2 content --
        </div>
        <div class="slide3">
            -- my slide 3 content --
        </div>
    </div>  
</body>

如果'slide1'显示，如何将'slide1-current'类添加到body，然后更改为'slide2-current'，同时如果'slide2'显示则删除'slide1-current'等等上？

Answer 1

(function() {
  var slides = jQuery(".slider > div");
  console.log(slides);
  var currentDisplayed = 0;
  var childCount = slides.length;
  $(slides[currentDisplayed]).addClass("slider-current");
  setInterval(function() {
    $(slides[currentDisplayed]).removeClass("slider-current");
    if (currentDisplayed < (childCount - 1)) {
      $(slides[currentDisplayed]).removeClass("slider-current");
      currentDisplayed += 1;
    } else {
      currentDisplayed = 0;
    }
    $(slides[currentDisplayed]).addClass("slider-current");

  }, 1000);

})()

.slider-current {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slide1">
    -- my slide 1 content --
  </div>
  <div class="slide2">
    -- my slide 2 content --
  </div>
  <div class="slide3">
    -- my slide 3 content --
  </div>
</div>

Answer 2

您可以尝试类似

的内容

$(window).scroll(function() {
  var pos = $(window).scrollTop(), // Current scroll position
      max = 300, // How quickly we want the animation to finish (in pixels)
      box = 50, // Collapsed height of the box
      ang = 0; // Collapsed height of the angle

  /* Only make changes if we are within the limit of our max variable
   * If this condition is not met, the box and angle will be collapsed
   * I found this necessary because scrollTop doesn't produce consistent
   * values and quite often the box wouldn't fully collapse */
  if (pos <= max) {
    // Max height - (scroll percentage x (max height - min height))
    box = 125 - (pos / max * 75);
    ang = 175 - (pos / max * 175);
  }

  // Adjust the height of the box and the angle
  $('#box').css({ 'height': box + 'px' });
  $('#ang').css({ 'border-top-width': ang + 'px' });
});

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 1000,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
}).on({
  beforeChange: function(event, slick, currentSlide, nextSlide) {
    $('body').removeClass('slide' + (currentSlide + 1) + '-current').addClass('slide' + (nextSlide + 1) + '-current')
  }
});

.slide1-current {
  color: red;
}
.slide2-current {
  color: green;
}
.slide3-current {
  color: blue;
}

如果显示带有类的幻灯片，则Slick Carousel会向class添加/删除类

2 个答案: