Question

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

    <!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>

Answer 1

$（＆＃34; div.active＆＃34;）或$（＆＃34; li.active＆＃34;）

Bootstrap carousel：如何知道旋转木马暂停时它是哪个滑块

1 个答案: