Question

我试图找到Twitter Bootstrap Carousel 2.3导航控件的最佳解决方案，但我找不到任何。案例如下。我试图从一键触发旋转木马，但直到现在我还没有找到正确的解决方案。我知道我需要学习旋转木马课程，但我真的不知道。

这是我现在正在使用的jquery：

            $(function () {
            $('.modal-carousel').carousel({
                interval:2000,
                pause: "false"
            });
            $('.style').click(function () {
                $('.modal-carousel').carousel('cycle');
                console.log('Starts carousel');
            });
            $('.stop.style').click(function () {
                $('.modal-carousel').carousel('pause');
                console.log('Stops carousel');
            });
        });

按钮始终为 .style class ，而当用户点击按钮时，会添加 .stop 。

有什么建议吗？

Answer 1

您可以使用hasClass确定元素上的stop类，并将其用于对象corousel状态，并且不必将元素绑定两次。像这样

    $(function () {
        $('.modal-carousel').carousel({
            interval:2000,
            pause: "false"
        });

        $('.style').click(function () {
            if ($(this).hasClass("stop")){
                $('.modal-carousel').carousel('pause');
                console.log('Stops carousel');   
            } else {
                $('.modal-carousel').carousel('cycle');
                console.log('Starts carousel');
            }            
        });
    });

Answer 2

以下是我的答案，这是我的情况，所以你可以尝试两个：

        $(function () {
              $('.modal-carousel').carousel('pause');

              $('.style').click(function () {
                  if ($(this).hasClass("stop")){
                      $('.modal-carousel').carousel({
                            pause: true,
                            interval: 0
                        });
                      console.log('Stops carousel');   
                  } else {
                      $('.modal-carousel').carousel({
                            pause: true,
                            interval: 3000
                        });
                      console.log('Starts carousel');
                  }            
              });
        });

Twitter引导旋转木马控制与一个按钮

2 个答案: