Question

我一直在研究一个有一个主要问题的自助式旋转木马。

需要暂停功能，这在使用时正常工作，但当焦点从暂停按钮移动时，轮播将重置为默认设置并再次开始循环。

我已经尝试了另外两种方法来阻止这种无法奏效的行为;更改间隔而不是调用暂停，并使暂停按钮设置一个标志，该标志将触发setInterval触发暂停的窗口。

当按下暂停按钮时，是否有更好的方法可以永久停止旋转木马循环？

该页面还使用了adobe mega菜单，我将脚本包含在内，以防它们导致问题。

<html>
  <head>

    <link href="css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/jquery-accessibleMegaMenu.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-carousel.js"></script>

  </head>

  <body>
    <div class="page-wrapper">
        <!-- content starts here -->
        <div class="content">
            <center>
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                  <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="http://placehold.it/800x300" alt="EXCEL 2015">
                        </div>

                        <div class="item">
                            <img src="http://placehold.it/700x300" alt="EEO Programs">
                        </div>

                        <div class="item">
                            <img src="http://placehold.it/800x300" alt="Place hold">
                        </div>

                        <div class="item">
                            <img src="http://placehold.it/600x300" alt="Flower">
                        </div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>

                    <!-- Play and Pause -->
                    <div id="carouselButtons">
                        <input type="button" class="btn start-slide" value="Play" id='playButton'>
                        <input type="button" class="btn pause-slide" value="Pause" id='pauseButton'>
                    </div>
                </div>
            </center>
        </div>
    </div>

    <!-- Nav menu scripts -->
    <script>
        $("nav:first").accessibleMegaMenu({
            /* prefix for generated unique id attributes, which are required 
               to indicate aria-owns, aria-controls and aria-labelledby */
            uuidPrefix: "accessible-megamenu",

            /* css class used to define the megamenu styling */
            menuClass: "nav-menu",

            /* css class for a top-level navigation item in the megamenu */
            topNavItemClass: "nav-item",

            /* css class for a megamenu panel */
            panelClass: "sub-nav",

            /* css class for a group of items within a megamenu panel */
            panelGroupClass: "sub-nav-group",

            /* css class for the hover state */
            hoverClass: "hover",

            /* css class for the focus state */
            focusClass: "focus",

            /* css class for the open state */
            openClass: "open"
        });
    </script>
    <!-- carousel scripts -->
    <script>
        $(document).ready(function() {
            $('#myCarousel').carousel({
                interval: 2000,
                pause: "false"
                });
            });

        $('#playButton').click(ClickOnPlayButton);

        function ClickOnPlayButton(){
            $('#myCarousel').carousel('cycle');
            }

        $('#pauseButton').click(ClickOnPauseButton);

        function ClickOnPauseButton(){
            $('#myCarousel').carousel('pause');
            }
    </script>
  </body>
</html>

Answer 1

即使在鼠标悬停时也能保持轮播循环（用户可以通过单击轮播中的导航按钮返回特定幻灯片）。然后使用播放和暂停按钮暂停。

   $(document).ready(function() {
        $('.carousel').carousel({
            interval: 2000,
            pause: "none"
            });
        });

Answer 2

您无需单独加载<script src="js/bootstrap-carousel.js"></script>。它是标准bootstrap.js的一部分。

轮播中没有pause: "false"。您可以设置interval:false。

这是一个适合您的jsFiddle。

   $(document).ready(function() {
        $('#myCarousel').carousel({
            interval: 2000  // setting interval:false will pause carousel on load 
            });
    $('#myCarousel').carousel('pause');


    $('#playButton').click(ClickOnPlayButton);

    function ClickOnPlayButton(){
        $('#myCarousel').carousel({interval: 2000});
        }

    $('#pauseButton').click(ClickOnPauseButton);

    function ClickOnPauseButton(){
        $('#myCarousel').carousel('pause');
        }

 });

Bootstrap轮播重置为默认设置

2 个答案: