以下是使用中的简单轮播,即使它在编码中看起来很好,但是在浏览器上试图点击next
或prev
按钮时,页面是scrolled
到HTML的顶部。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
找到了与data-target
某处的原因,然而,无法弄明白,以及如何停止滚动顶部...
寻找最简单的解决方案来理解,作为HTML的新手..
提前致谢
干杯..
提示#1:
您可以添加event.preventDefault()以防止hashbang的默认行为:
$('a[class^=carousel-control-]').click(function (event) {
event.preventDefault();
});
提示#2:
如果您有像SmoothScroll这样的插件,可以通过以下方式取消绑定:
$('a[class^=carousel-control-]').unbind('click.SmoothScroll');
要查找绑定到元素的所有单击事件,请使用:
jQuery._data($('a[class^=carousel-control-]')[0], "events")