我试图为我的网站创建一个Carousel,但图像只是静态的,彼此叠加

时间:2016-04-04 12:55:02

标签: javascript jquery html5 twitter-bootstrap carousel

<!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">

<title>Bootstrap Plugins</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

  </head>
  <body>

          <br><br>

          <!-- Bootstrap Carousel -->
          <div id="bestCarsCarousel" class="carousel slide" data-ride="carousel">

              <!-- Indicators -->
              <ol class="carousel-indicators">
                  <li data-target="#bestCarsCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#bestCarsCarousel" data-slide-to="1"></li>
                  <li data-target="#bestCarsCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
              <div class="item active">
                      <img src="../Images/project1a.jpg" alt="project1a" height ="300" width="400">
                      <div class="carousel-caption">
                          <h3>Car 1</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                      </div>
                  </div>

                  <div class="item">
                      <img src="../Images/project1b.jpg" alt ="project1b" height ="300" width="400">
                      <div class="carousel-caption">
                          <h3>Car 2</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                      </div>
                  </div>

                  <div class="item">
                      <img src="../Images/project1c.jpg" alt="project1c" height ="300" width="400">
                      <div class="carousel-caption" >
                          <h3>Car 3</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                      </div>
                  </div>
              </div>

              <!-- Controls -->
              <a class="left carousel-control" href="#bestCarsCarousel" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" href="#bestCarsCarousel" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
          </div>

          <br><br>



      <script src="js/jquery.js"></script>
      <script src="js/bootstrap.js"></script>

  </body>
</html>

事情是,这个代码完全正常,在我的大学教程中,我从代码中获取代码,我已经从代码中获取了代码片段,并对其进行了编辑以匹配我的图像,以及我有完全相同的jquery和bootstrap代码,但在教程中它工作正常,但在我自己的代码中它没有,我不明白为什么?

&#13;
&#13;
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<br><br>
<!-- Bootstrap Carousel -->
<div id="bestCarsCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
	  <li data-target="#bestCarsCarousel" data-slide-to="0" class="active"></li>
	  <li data-target="#bestCarsCarousel" data-slide-to="1"></li>
	  <li data-target="#bestCarsCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
  <div class="item active">
		  <img src="../Images/project1a.jpg" alt="project1a" height ="300" width="400">
		  <div class="carousel-caption">
			  <h3>Car 1</h3>
			  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		  </div>
	  </div>
	  <div class="item">
		  <img src="../Images/project1b.jpg" alt ="project1b" height ="300" width="400">
		  <div class="carousel-caption">
			  <h3>Car 2</h3>
			  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		  </div>
	  </div>
	  <div class="item">
		  <img src="../Images/project1c.jpg" alt="project1c" height ="300" width="400">
		  <div class="carousel-caption" >
			  <h3>Car 3</h3>
			  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		  </div>
	  </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#bestCarsCarousel" data-slide="prev">
	  <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#bestCarsCarousel" data-slide="next">
	  <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<br><br>
&#13;
&#13;
&#13;

0 个答案:

没有答案