0

我正在使用 Fred LeBlanc 的 3D 图像轮播Roundabout jQuery 插件。

我分叉了一个带有控制按钮的jsfiddle ；

使用播放/暂停控件的 JS 代码

 btnToggleAutoplay: ".toggle",

而html本质上是

<a href="#" class="toggle">Toggle</a>

. 它通过选择按钮来暂停自动动画，然后再次选择重新开始。

需要的是让按钮显示 2 个不同的“切换”状态，这目前超出了这个剪切-粘贴~编码器。

该文档列出了两个“可调用方法”http://fredhq。com /项目/回旋处/#isAutoplaying

.roundabout("isAutoplaying")

返回一个布尔值

, 和“可挂钩事件” http://fredhq 。com /项目/回旋处/#autoplayStart

自动播放开始

当自动播放功能启动时，此事件在 Roundabout 元素上触发。

自动播放停止

当自动播放功能停止时，此事件在 Roundabout 元素上触发。

实现这些 api 方法的方法对我个人来说是未知的。请帮助一个绿角。

4

1 回答 1

0

It looks like you can just add a .click to your "toggle button" that checks the current button text and changes it. Assuming I understand that you want it to say "Pause" while playing and "Play" while paused, I have a working JSFiddle.

JSFiddle Demo

$('.toggle').click(function() {
    var button = $(this);

    if(button.html() == 'Play') {
        button.html('Pause');//Playing, click to pause
    } else {
        button.html('Play');//Paused, click to play
    }   
});

EDIT: To change the CSS, you can just use the .css() function.

JSFiddle Demo

$('.toggle').click(function() {
    var button = $(this);

    if(button.hasClass('gray')) {
        //button.html('Pause');//Playing, click to pause
        button.removeClass('gray');
        button.addClass('blue');
        button.css('backgroundColor', 'rgb(33, 121, 182)');
    } else {
        //button.html('Play');//Paused, click to play        
        button.removeClass('blue');
        button.addClass('gray');
        button.css('backgroundColor', '#2f2f2f');
    }
});
于 2013-09-16T20:08:14.437 回答