bootstrap怎么用滚动监听控制轮播
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap怎么用滚动监听控制轮播相关的知识，希望对你有一定的参考价值。
参考技术A Bootstrap 轮播描述
在本教程中，您将看到如何使用 Bootstrap 创建轮播。这将帮您创建内容滑块，图像画廊等等。
用法
<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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
所以，您把想要呈现的条目（比如 images）以循环顺序放置在 "carousel-inner" div 中，通过 "<!-- Carousel nav -->" 创建条目的导航。它使用定制的 data 属性 "data-slide" 来导航到上一个和下一个条目。
您必须在您要创建轮播的 html 文件引用 jquery.js 和 bootstrap-carousel.js 文件。
Bootstrap 轮播实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap pager with next and previous example</title>
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body
margin: 50px;
</style>
</head>
<body>
<ul class="pager">
<li>
<a href="#">Previous</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</body>
</html>本回答被提问者和网友采纳 参考技术B 您可以在 DOM 上创建和移除元素时使用 scrollspy（滚动监听）。但是，您必须调用 refresh 方法。
下面的代码演示了如何做到这点：
$('[data-spy="scroll"]').each(function ()
var $spy = $(this).scrollspy('refresh')
);
bootstrap2 的图片轮播，如何自动播放？
我在用2 ，里面的Carousel轮播 不是自动播放，必须执行一下，才开始自动播放，。 我想让他不用执行就自动播放，请问具体怎么做呢
越具体越好
interval: 2000
)
方法1、直接放在script里
方法2、
$(document).ready(function()
$('.carousel').carousel(
interval: 2000
)
);本回答被提问者和网友采纳
以上是关于bootstrap怎么用滚动监听控制轮播的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot 轮播全屏 html,css,bootstrap
Flutter监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )