Bootstrap JavaScript轮播不停止循环

发布时间：2020-12-18 00:05:13 所属栏目：安全来源：网络整理

导读：Twitter Bootstrap版本：2.0.3 示例HTML代码： !DOCTYPE htmlhtml dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"headlink rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" /script type="text/javascrip

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
        });
    });
});?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!