Jquery Carousel - 计算活动幻灯片是否具有特定ID然后滑动到它。

Question

我想这个问题并没有大的帮助，所以我会尽可能地保持清醒。

所以我有一个设置，其中我的标题中有4个锚文本。身体的第一部分有一个自定义的jquery旋转木马。

我尝试实现的目的基本上是这样，当点击标题中的四个锚链接中的任何一个时，它们会滚动到我给出ID的特定幻灯片。我当然的问题是允许旋转木马有任何活动的幻灯片，并且锚定链接计算哪个幻灯片是活动的以及需要滑动多少以获得正确的幻灯片。

以下是轮播的jquery：

var carousel;            // used as the object for the carousel
var carousels = [];      // will hold any and all carousels on the page
var preventTimeouts = false;
var intervals = [];

$(document).ready(function () {
carousels.push(new carousel('slideshow_window', 'slidesHolder', '.slide', 920, 10000, 1000, true));  
});

carousel = function CarouselSlider(windowName, slideCollectionWrapper,slideCollection, slideWidth, slideChangeInterval, slideChangeSpeed, requireNavButtons) {

// Variables

var slideWidth = slideWidth;                        // the width of each slide
var slides_array = $(slideCollection).toArray();
var numberOfSlides = slides_array.length;
var slideChangeInterval = slideChangeInterval;      // how often the slides will automatically change
var slideChangeSpeed = slideChangeSpeed;            // how fast the slides change
var slideIntervalId;                                // holds the interval event (the event for the next time that the slides should change)
var animating = false;                              // used to track whether an animation is underway
var currentPosition = 0;                            // used to highlight the centre image to begin with
var requireNavButtons = requireNavButtons;

var windowName = windowName;
var collectionWrapper = slideCollectionWrapper;

// Carousel

$('#' + windowName).append("<div id=\"" + collectionWrapper + "\"></div>"); // set up the collection wrapper
$('#' + collectionWrapper).css('width', slideWidth * numberOfSlides);
$('#' + collectionWrapper).css('position', "relative");

for (var i = 0; i < slides_array.length; i++)               // add items from the collection to the wrapper
    $('#' + collectionWrapper).append(slides_array[i]);
$('#' + collectionWrapper).css('left', 920 - slideWidth);

//    for (i = 0; i < slides_array.length; i++) {                 // run one  round of the carousel to ensure correct positioning
//        currentposition++;
//        moveslide(true, true);                                  // set 'forced' to true to disable the animation
//    }
function changePosition(forwards) {
    forwards ? currentPosition++ : currentPosition--;
    moveSlide(forwards, false);
}

function moveSlide(forwards, forced) {
    var nextSlide;
    animating = true;

    if (forwards) {
        nextSlide = currentPosition % numberOfSlides;
        var t_dur = forced ? 0 : slideChangeSpeed;
        $('#' + collectionWrapper).append(slides_array[nextSlide]);
        $('#' + collectionWrapper).append(slides_array[nextSlide + 1 > numberOfSlides - 1 ? 0 : nextSlide + 1]); // load the next two slides
        $('#' + collectionWrapper)
              .animate({ left: "-=" + slideWidth, queue: false },
               t_dur,
               function () {
                   $('#' + collectionWrapper + ' ' + slideCollection + ':first').remove();
                   $('#' + collectionWrapper).css('left', 0);
                   animating = false;
               });
    }
    else {
        nextSlide = (currentPosition % numberOfSlides);
        $('#' + collectionWrapper).prepend(slides_array[nextSlide - 1 < 0 ? numberOfSlides + nextSlide : nextSlide]);
        $('#' + collectionWrapper).prepend(slides_array[nextSlide < 0 ? numberOfSlides + nextSlide : nextSlide]);
        $('#' + collectionWrapper).css('left', 0 - slideWidth); // increase offset to account for prepended slides
        $('#' + collectionWrapper)
            .animate({ left: "+=" + slideWidth, queue: false },
            slideChangeSpeed,
            function () {
                $('#' + collectionWrapper + ' ' + slideCollection + ':last').remove();
                animating = false;
            });
    }
}

/*
Navigation buttons
*/

$("#next").click(function () {
    if (!animating) {                                                       // only queue one click at a time
        changePosition(true);
    }
});
$("#prev").click(function () {
    if (!animating) {
        changePosition(false);
    }
});
$("#prevSearch").click(function () {
    if (!animating) {
        changePosition(false);
    }
});
$("#prevSearch2").click(function () {
    $("#modalContainer").hide();
    if (!animating) {
        changePosition(false);
    }

});

}