jQuery幻灯片使用Timer插件 - 如何更改幻灯片?

时间:2013-02-27 20:32:04

标签: javascript jquery jquery-plugins

我正在创建一个jQuery滑块(如此陈词滥调),当你点击控件中的一个项目符号时,我遇到了一个问题。除此之外,它功能齐全。我找到了jQuery计时器插件并用我正在使用的'setInterval()'函数交换出来。

所以,问题,当我点击控件中的子弹时,我似乎无法弄清楚如何让幻灯片更改......我尝试将点击的子弹值(幻灯片#)传递给计时器功能,那不起作用(我做的方式)。我对方法或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);
});

0 个答案:

没有答案