Question

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head      content must come *after* these tags -->
<title>Carousel slide</title>

<!-- Bootstrap -->
<link href="styles/b/bootstrap.min.css" rel="stylesheet">
<link rel ="stylesheet" href= "css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media   queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">   </script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">  </script>
<![endif]-->
</head>
<body>


 <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>
  </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="img/mountain.jpg" alt="Mountain">
   <div class="carousel-caption">
    <h3>Mountain</h3>
    <p>Lovely picture of a mountain.</p>
   </div>
  </div>

 <div class="item">
  <img src="img/sunset.jpg" alt="sunset">
   <div class="carousel-caption">
    <h3>Sunset</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
   </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>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

这是我收到的图像结果。我不知道我做错了什么。请有人帮帮忙。我还需要：

背景跨越整个页面，而内容仍然位于中心区域。
使箭头在图像上滚动小？
自动滚动

Answer 1

首先：您的第二个</div> div下方有.item个缺失。哦，我忘了：你在 /jquery.min.js 之前的jQuery网址中有一个空格，应该删除。

要使图像居中并且高度始终相同（第一点）：

#myCarousel {
    height: 256px;
}

#myCarousel img {
    max-height: 256px;
    margin-left: auto;
    margin-right: auto;
}

.carousel-inner {
    text-align: center;
}

默认情况下会自动滚动，以更改data-interval="<yourspeed>" div fpr所有图像或每个.carousel div的间隔添加.item，以便为每个图像获取不同的间隔。那是你的第三点。

其次我不明白。

JSFiddle

Answer 2

我解决了这个问题。这是正确放置字体文件。还要感谢CSS的帮助！

旋转木马幻灯片不断弄乱

2 个答案: