文章/答案/技术大牛

发布

社区首页 >问答首页 >引导转盘重置为默认设置

问引导转盘重置为默认设置
EN

Stack Overflow用户

提问于 2015-05-09 01:46:38

回答 2查看 2.6K关注 0票数 1

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

我已经尝试了另外两种方法来停止这种行为，但都没有起作用；更改间隔而不是调用pause，并使pause按钮设置一个标志，该标志将命中触发暂停的窗口的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>

twitter-bootstrap

carousel

javascript

jquery

回答 2

Stack Overflow用户

发布于 2015-05-09 05:32:26

保持旋转木马循环，即使鼠标悬停在上面(用户始终可以通过单击旋转木马中的导航按钮返回到特定幻灯片)。然后使用播放和暂停按钮暂停。

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

票数 2

Stack Overflow用户

发布于 2015-05-09 03:35:21

您不需要单独加载<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');
        }

 });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30129830

复制

相似问题

问引导转盘重置为默认设置
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导转盘重置为默认设置EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导转盘重置为默认设置
EN