Bootstrap JavaScript轮播不停止循环

前端之家收集整理的这篇文章主要介绍了Bootstrap JavaScript轮播不停止循环前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Twitter Bootstrap版本:2.0.3

示例HTML代码

<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraPHProtocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            pause: true,interval: false
        });
    });
});​
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</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>
</body>
</html>

CSS:提供bootstrap.css

问题:如您所见,我已启用了暂停模式,并禁用了自行车。但是当我点击轮播的左侧或右侧控件时,轮播会以默认间隔(每个周期5秒)在鼠标左键开始循环。

如何强制禁用骑车?我想让用户手动循环图像。

您可以在我的测试网站here上测试问题。

解决方法

您可能想尝试删除“暂停”属性。没有必要,如果你不是自动循环的图像。我的假设(我将看看引导代码验证)是,当“mouseleave”事件触发时,循环恢复 – 即使它被关闭在第一位。当它恢复时,它使用默认速度。

这里是一个解决方案:

$(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            interval: false
        });
    });
});​
原文链接:https://www.f2er.com/bootstrap/234564.html

猜你在找的Bootstrap相关文章