Question

我不确定最新情况。在初始启动时，代码运行完美。但是我注意到初始运行后toIndex从0基数变为1。它抛弃了导航突出显示而一般只是制造麻烦

这是fiddle 和代码

滑块

// Helper function to return the first slide for the given slider
function getFirstSlide(sliderElem) {
  return sliderElem.find(".slide").eq(0);
}

// Helper function to get current slide for this slider
function getCurrentSlide(sliderElem) {
  return sliderElem.find(".currentSlide");
}

// Animate the given slider to the given slide
function animToSlide(sliderElem, slideNum) {

  // Get the current slide
  var currentSlide = getCurrentSlide(sliderElem);

  // Get the target slide
  var targetSlide;
  if(slideNum < sliderElem.data().slideCount) {
    // If the number if within the number of slides
    targetSlide = sliderElem.find(".slide").eq(slideNum);
  } else {
    // If the number is not within the number of slides, wrap to the first
    targetSlide = getFirstSlide(sliderElem);
  }

  // Position the target slide (currently invisible) above the current slide
  targetSlide.css({"z-index": 500});

  // Position the current slide under the target slide
  currentSlide.css({"z-index": 100});

  // Add currentSlide class to the target slide. Triggers CSS3 transition to start fading it in
  targetSlide.addClass("currentSlide");

  if(sliderElem.data().onSlideChange !== undefined) {
      sliderElem.data().onSlideChange(currentSlide.index(), slideNum);
  }

  // Wait for the animation duration before removing the currentSlide class from the current slide
  // Ensures that target slide in fully visible before the current slide fades away
  setTimeout(function() {
    currentSlide.removeClass("currentSlide");

  }, sliderElem.data().animDuration);
}

// Start a timer for the slider with the given duration, and save a reference to it
function startSliderTimer(sliderElem, slideDuration) {
  if(sliderElem.data().autoSlide){

  // Save the timer to the slider's data in case we need to cancel it later
  sliderElem.data({
    slideTimer: setTimeout(function() {

      sliderTickEvent(sliderElem);

    }, slideDuration)
  });
  }
}

// Used to manually set the current slide of the given slider to the given slide
function setSlide(sliderElem, slideNum) {

  // Cancel if an attempt is made to switch to the current slide
  if(slideNum == getCurrentSlide(sliderElem).index()) {
    return;
  }

  // Get the current timer for this slider
  var slideTimer = sliderElem.data().slideTimer;

  // Stop it if it exists
  if(slideTimer !== undefined) {
    clearTimeout(slideTimer);
  }

  // Animate to the given slide
  animToSlide(sliderElem, slideNum);

  // Set a new timer
  startSliderTimer(sliderElem, sliderElem.data().slideDuration);
}

// This is called on a timer.
// Calls animToSlide to the next slide
function sliderTickEvent(sliderElem) {
  // Get current slide number by looking at DOM
  var currentSlide = getCurrentSlide(sliderElem).index();

  // Animate to the next slide
  animToSlide(sliderElem, currentSlide + 1);

  // Start a timer.
  startSliderTimer(sliderElem, sliderElem.data().slideDuration);
}

// Given an object of options, initialize a new slider
function initSlider(sliderOptions) {

  // Get the slider element
  var sliderElem = sliderOptions.sliderElem;

  // Take the slider container and add our generic class
  sliderElem.addClass("slider");

  // Take the slides and add our generic class
 sliderElem.find(sliderOptions.slideSelector).addClass("slide");

  // Apply slider sizing 
  sliderElem.css({
    width: sliderOptions.sliderWidth,
    height: sliderOptions.sliderHeight
  });

  // Apply transition effect to slide
  sliderElem.find(".slide").css({
    transition: "opacity " + sliderOptions.animDuration + "s " + sliderOptions.animTimingFunc
  });

  // Count the number of slides and save it in the slider options
  sliderOptions.slideCount = sliderElem.find(".slide").length;

  // Store the slider options on the slider element itself
  sliderElem.data(sliderOptions);

  //Start a timer for this slider
  startSliderTimer(sliderElem, sliderOptions.slideDuration);

  //Add dot nav
  if(sliderElem.data().dotNav){
    innerDiv = '';
    sliderElem.find('.slide').each(function() {
      innerDiv += '<div class="slideNavDot">&sdot;</div>';
    });
    slideNav = '<div class="slideNav">' + innerDiv + '</div>';
    sliderElem.append(slideNav);
    sliderElem.find('.slideNavDot').eq(0).addClass('dotSelected');
  } 
}



$(document).ready(function() {

    var defaultSliderOptions = {
        //jQuery object for the slider container
        sliderElem: null,

        //jQuery selector for a slide
        slideSelector: null,

        //Slide duration in milliseconds
        slideDuration: 7000,

        // Animation duration in seconds
        animDuration: .7,

        // ease, ease-in, ease-out, ease-in-out, etc
        animTimingFunc: 'ease',

        sliderWidth: '100%',
        sliderHeight: '100%',
        autoSlide: true,

        onSlideChange: undefined
    };
    initSlider($.extend({}, defaultSliderOptions, {
        sliderElem: $("#campus-slider"),
        slideSelector: ".campusSlide",
        dotNav: true,
        onSlideChange: function(fromIndex, toIndex) {
            $('#campus-slider').find(".slideNavDot").addClass('campusDot');
            $('.campusDot').removeClass("dotSelected").eq(toIndex).addClass("dotSelected");
            $('.slideCover').css('background-image', 'none');
            console.log(toIndex);
        }
    }));

    $('#campus-slider').find('.slideNavDot').click(function() {
        setSlide($("#campus-slider"), $(this).index());
        $('#campus-slider').find('.slideNavDot').removeClass('dotSelected');
        $(this).addClass('dotSelected');
    });

});

Answer 1

看起来唯一的问题是您没有重置条件来突出显示第一个点。 JQuery方法.eq()从零开始（see here），你的toIndex永远不会为零。由于您始终突出显示下一个点（fromIndex + 1）并且fromIndex永远不会小于零，因此您永远不会突出显示循环中的第一个点。

尝试在onSlideChange事件中添加此内容：

onSlideChange: function(fromIndex, toIndex) {
    $('#campus-slider').find(".slideNavDot").addClass('campusDot');

    // if we exceed the lengths of the dots
    var $dots = $('.campusDot');
    if($dots.length === toIndex) {
        // reset to zero index
        toIndex = 0;
    }

    $('.campusDot').removeClass("dotSelected").eq(toIndex).addClass("dotSelected");
    $('.slideCover').css('background-image', 'none');
    console.log(toIndex);
}

Fiddle

初始回合后幻灯片放映的索引设置为1

1 个答案: