0

超初心者なのでお手柔らかにお願いします。

ブートストラップ カルーセル プラグインを使用しようとしていますが、各スライドが変更されると、異なる div セクションが表示されます。良い例を見つけましたが、残念ながら一時停止する方法がわかりません。

<html>
    <head>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>

        <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
        <style>
            .carousel {
                width: 80%;
                margin-left: auto;
                margin-right: auto;
            }
        </style>

        <title>testapp</title>
    </head>

    <body>
        <div id="msg"></div>

        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://i.microsoft.com/global/en-us/homepage/PublishingImages/sprites/microsoft_gray.png" />
                </div>
                <div class="item">
                    <img src="http://www.google.com.pk/ig/images/jfk/google_black.png" />
                </div>
                <div class="item">
                    <img src="http://www.google.com.pk/ig/images/jfk/google_black.png" />
                </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>

<div class="row">
  <div class="offset2">
    <div>Microsoft: *** index 0 ***</div>
    <div>Google: *** index 1 ***</div>
    <div>Google: *** index 2 ***</div>
  </div>
</div>
</body>
</html>

JS

    function msg(m) {
        $("#msg").text(m);
    }

    $('#myCarousel').carousel({
        interval: 5000
    });

    var carouselTexts = $(".row .offset2 div");

    $('#myCarousel').on('slid', function(event) {
        var idx = $(event.target).find('.carousel-inner .active').index();
        carouselTexts.hide().eq(idx).show();
    }).trigger('slid');

http://jsfiddle.net/ymwL5/2/

"Pause: "hover" を interval: 5000 行の下に追加すると、Div の回転が停止し、非表示セクションが完全に壊れます。

どんな助けでも大歓迎です。

4

1 に答える 1

0

カルーセルはデフォルトでホバー時に一時停止する必要があるため、そのオプションは必要ありません。「間隔：5000」オプションの後にコンマがないと思います。試す：

interval: 5000,
pause: "hover"
于 2013-04-21T18:48:05.633 に答える