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/

当我在间隔下方添加“暂停：”悬停：5000 行时，Divs 停止旋转，隐藏部分完全中断。

任何帮助，将不胜感激。

4

1 回答 1

0

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

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