0

我正在制作一个 jQuery 滑块（如此陈词滥调），当您单击控件中的一个项目符号时，我在更改幻灯片时遇到了问题。除此之外，它功能齐全。我找到了 jQuery 计时器插件，并用我正在使用的 'setInterval()' 函数将其换掉。

所以，问题，当您单击控件中的项目符号时，我似乎无法弄清楚如何让幻灯片发生变化...我尝试将单击的项目符号值（幻灯片＃）传递给计时器函数，但没有t 工作（我这样做的方式）。我不太了解方法或 jQuery 插件格式，所以这对我来说很困难。

我的服务器 上的链接（工作）： http: //www.horsepowerfreaks.com/plugins/responsiveSlider/demo.html

这是jsFiddle （由于某种原因无法正常工作......）：http: //jsfiddle.net/derekfoulk/yUqKJ/

文件：

滑块插件（问题所在） http://www.horsepowerfreaks.com/plugins/responsiveSlider/rSlider.jquery.js

样式表 http://www.horsepowerfreaks.com/plugins/responsiveSlider/style.css

插件文档/演示： https ://github.com/jchavannes/jquery-timer http://jchavannes.com/jquery-timer/demo

我尝试的一部分：

/* Bullets - Here is my problem. This is not working the way I need it to.
Basically, when the user clicks a bullet, the slider should make the referenced
slide active and then reset the timer */

else if (action === "bullet"){
    // If user clicks on active bullet
    if ($(this).hasClass("active")){
        // Play/Pause (timer)
        Slider.toggleGallery();
    }
    else {
        /* Change slide (by referencing the 'data-slide' attribute of the bullet,
        then find the slide using that same value for its 'data-slide' attribute
        and make it the active slide and reset the timer */
        imageId = $(this).attr("data-slide");
        $(".active",$controls).removeClass("active");
        $(this).addClass("active");
        Slider.changeSlide(imageId);
    }
}

...进一步向下文件...

Slider = new (function() {
    var $galleryImages,
    $timeRemaining,
    incrementTime = options.pause,

    /* I am pretty sure this function needs to be fed the slide number that was selected
    when the user clicks a bullet. If it is the first run through, then the value of
    'imageId' should be '-1'. I would rather have the imageId value be set to '1'
    initially, but the configuration below is what worked for me... If I set the imageId
    to '0', numSlides to '$galleryImages.length' and the imageId inside the if statement
    to 0, then I get slide 2 for imageId 1, slide 3 for imageId 2, slide 4 for imageId 3,
    and slide 1 for imageId 4? If there is a way to have the active image (imageId)
    iterate '1,2,3,4' instead of '0,1,2,3' that would be awesome. */

    imageId = -1, // Which image is being shown
    updateTimer = function() {
        $galleryImages.eq(imageId).stop(true,true).removeClass("active");
        imageId++;
        console.log(imageId);
        var numSlides = $galleryImages.length - 1;
        if (imageId >= numSlides) {
            imageId = -1;
        }
        $galleryImages.eq(imageId).stop(true,false).addClass("active");
    },

    init = function() {
        $galleryImages = $(".slider").find('li');
        Slider.Timer = $.timer(updateTimer, incrementTime, true).once();
    };
    this.toggleGallery = function() {
        if (this.Timer.isActive) {
            this.Timer.pause();
            var remaining = this.Timer.remaining / 1000;
        }
        else {
            this.Timer.play();
        }
    };
    $(init);
});
4

0 回答 0