jquery - Bootstrap 轮播,自动循环然后停止

标签 jquery html css twitter-bootstrap

我正在使用 Twitter Bootstrap 和轮播功能。标记如下所示。

我正在尝试在页面加载时实现某些目标, 1. 轮播从第一张幻灯片开始并保持在那里(比如说 500 毫秒)。 2. 然后移动到幻灯片 2 并永远停止。

只有 2 张幻灯片,用户可以使用箭头在它们之间移动,但这不应触发幻灯片的持续循环。 (如果困难,这不是太重要)。

我试过根据需要更改轮播控件,但我不太明白:http://twitter.github.com/bootstrap/javascript.html#carousel

来自:

<script type="text/javascript">
$('.carousel').carousel({
        interval: 3000
})
</script>

到:

<script type="text/javascript">
                  $('.carousel').carousel({
                  interval: false
                  }).carousel(1).delay('500');
</script>

当我选择后一个选项时,一旦我按下箭头,旋转木马就会连续滚动,但根本不会正常滚动。

我已经包含了我的轮播标记。希望这可以帮助。有没有比我的小豌 bean 脑洞大的人有什么想法或指点?

<div id="myCarousel" class="carousel slide">
                  <div class="carousel-inner">
                  <div class="item active">
                        <a href="#" class="featurette">
                        <img class="featurette-image pull-right" width="200" height="200" src="en_200x200.png">
                        <h2 class="featurette-heading">Heading 1</h2><p class="lead muted">Strapline 1</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="featurette">
                        <img class="featurette-image pull-right" width="200" height="200" src="cloud.png">
                        <h2 class="featurette-heading">Heading 2</h2>
                        <p class="lead muted">Strapline 2</p>
                        </a>
                    </div>


                  </div>
                  <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
                  <hr>


                </div><!-- /.carousel -->    

最佳答案

您可以试试这个,虽然不能 100% 确定它会起作用,但值得一试。

此事件应在第一张幻灯片“滑动”后触发,然后应“暂停”轮播。

$('#myCarousel').bind('slid', function() {
    $(this).carousel('pause');
});​

根据此处的信息拼凑而成:

http://twitter.github.com/bootstrap/javascript.html#carousel

关于jquery - Bootstrap 轮播,自动循环然后停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14751406/

相关文章:

html - 从元素标签更改为类/id 标签时不加载 CSS

jquery - 在菜单中添加灯箱等背景

jquery - CSS Dropdown类问题+需要Jquery

jquery - 使用cheerio在没有 child 的 parent 中获取文本

jquery - 如何捕获 jQuery 对话框中十字图标的点击

c# - 在发布之前重新显示所有表单输入

javascript - 如何在 jQuery 中删除 DOM 元素或从 $(this).html() 中进行选择?

javascript - 如何在 Angular JS 中点击按钮添加类

css - CSS 中的 top 属性不适用于 Internet Explorer 6

javascript - 光滑 slider : Get rid of partial/edge images in centerMode