javascript - Bootstrap 轮播 : how to know which slider it is when carousel is paused

标签 javascript jquery css twitter-bootstrap

我有一个旋转木马幻灯片放映,我可以开始(在浏览器刷新时)和暂停(myBtn2)。暂停时我需要知道当前的 slider 是什么。我怎么做?在我的代码下面

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./style.css">
    <script src="main.js"></script>
    <style>
    .carousel-inner>.item>img, .carousel-inner>.item>a>img {
        width: 70%;
        margin: auto;
    }
    </style>
    </head>
    <body>

        <div class="container">

            <button type="button" id="myBtn2" class="btn btn-danger btn-lg">Set</button>
            <br>
            <br>
            <div id="myCarousel" class="carousel slide" data-interval="2000">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li class="item1 active"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="jack-spades.png" alt="Jake Spade" width="460"
                            height="345">
                    </div>

                    <div class="item">
                        <img src="jack_dimond.jpg" alt="Jack Diamond" width="460"
                            height="345">
                    </div>

                    <div class="item">
                        <img src="queen.jpg" alt="Queen" width="460" height="345">
                    </div>

                    <div class="item">
                        <img src="queen_spades.jpg" alt="Queen Spade" width="460"
                            height="345">
                    </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <script>
            $(document).ready(function() {
                // Activate Carousel
                $("#myCarousel").carousel("cycle");

                // Click on the button to stop sliding
                $("#myBtn2").click(function() {
                    $("#myCarousel").carousel("pause");
                });

                // Enable Carousel Indicators
                $(".item1").click(function() {
                    $("#myCarousel").carousel(0);
                });
                $(".item2").click(function() {
                    $("#myCarousel").carousel(1);
                });
                $(".item3").click(function() {
                    $("#myCarousel").carousel(2);
                });
                $(".item4").click(function() {
                    $("#myCarousel").carousel(3);
                });

                // Enable Carousel Controls
                $(".left").click(function() {
                    $("#myCarousel").carousel("prev");
                });
                $(".right").click(function() {
                    $("#myCarousel").carousel("next");
                });
            });
        </script>

    </body>
    </html>

最佳答案

$("div.active") 或 $("li.active")

关于javascript - Bootstrap 轮播 : how to know which slider it is when carousel is paused,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44786701/

相关文章:

java - 如何调试从 Java 调用的 JavaScript 代码(通过 JSR-223)?

jquery - 每 1 秒用 JQuery 显示一次 div

jquery - 如何使用 Jquery Knob 显示单位

javascript - 制作自定义形状的 div css html

html - 如何将 flex 元素居中?

javascript - "To Be or Not to Be"关于 JavaScript 中的变量

javascript - 模拟器卡在从 10.0.2.2 :8081, 加载是什么问题?

javascript - 使用 mailto : 截取嵌入对象并嵌入到电子邮件中

javascript - 向上滑动并淡入淡出动画

css - 大背景图片的css放在哪里?