Question

我正在为项目使用Hero Slider，并且我想定义一个像gotoSlideN(n)这样的函数以转到第n张幻灯片。

var gotoSlideN = function (n) {
  $(".cd-hero-slider .selected").removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
    $(".cd-hero-slider .selected").removeClass('is-moving');
  });
  var selectedPosition = n,
      activePosition = $('.cd-hero-slider .selected').index();
  if (activePosition < selectedPosition) {
    $(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').nextAll().addClass('move-left');
  } else {
    $(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').prevAll().addClass('move-right');
  }
};

上面的代码有效，但是当我尝试浏览上一张幻灯片时遇到了一些问题。例如，当我呼叫gotoSlideN(3)时，当所选幻灯片为数字4时，第4张幻灯片被隐藏，但第3张幻灯片没有显示。

gotoSlideN(5); //working
gotoSlideN(4); //working
gotoSlideN(5); //not working truly

Answer 1

我找到了问题的答案

enter code herevar gotoSlideN = function (n) {var selectedPosition = n,
        activePosition = $('.cd-hero-slider .selected').index();
if (activePosition < selectedPosition) {
$(".cd-hero-slider .selected").removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
    $(".cd-hero-slider .selected").removeClass('is-moving');
});
   $(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').nextAll().addClass('move-left');
} 
else {
    $(".cd-hero-slider .selected").removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  $(".cd-hero-slider .selected").removeClass('is-moving');
});  
   $(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');

// container.children（'li'）。eq（n）.addClass（'从左选择'）.removeClass（'向左移动'）.nextAll（）。removeClass（'向左移动'） ; } };

如何使英雄滑块转到特定幻灯片

1 个答案: