Question

我是最新的，所以请保持温柔。

我正在尝试使用bootstrap carousel插件，并在每张幻灯片更改时显示不同的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/

当我添加“暂停：”悬停“低于间隔：5000行时，Divs停止旋转并且隐藏部分完全断开。

任何帮助将不胜感激。

Answer 1

默认情况下，轮播应暂停，因此您不需要该选项。我认为你在“interval：5000”选项后缺少一个逗号。尝试：

interval: 5000,
pause: "hover"

Bootstrap Carousel暂停

1 个答案: