我在我的网站上使用轮播,但我的代码无效。任何人都可以指导我,告诉我代码是否有问题?
<!DOCTYPE html>
<html>
<head>
<title>Welcome to COMPEDDED. </title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 2000
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link href="main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="nav">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
<ul class="nav nav-pills" >
<li role="presentation" class="active"><a href="file:///home/tejvir/Compedded/test.html">Home</a></li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/browse.html">Browse</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="nav nav-pills" >
<li role="presentation" ><a href="file:///home/tejvir/Compedded/signup.html">Sign Up</a></li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/Login.html">Log In</a> </li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="file:///home/tejvir/Firefox_wallpaper.png" alt="firefox">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="file:///home/tejvir/1920x1080.png" alt="ubuntu">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="file:///home/tejvir/1920x1080.png" alt="example">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3> ST microelectronics </h3>
<p> Compiler to compile different embedded codes </p>
<p>
<a href="http://www.tico-india.com"> See how to use this compiler </a>
</p>
</div>
<div class="col-md-4">
<h3> How a compiler works? </h3>
<p> Description Text. </p>
<p>
<a href="http://www.facebook.com"> Link text. </a>
</p>
</div>
<div class="col-md-4">
<h3> Reliability </h3>
<p> From experienced engineers these compilers have been tested and verified several times. </p>
<p>
<a href="http://www.google.com"> Learn more about reliability at Compedded </a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
问题是旋转木马显示的是我的第一张图片以及左右按钮。但它实际上并没有起作用。我的意思是图像没有滑动,甚至按钮都不会工作。我相信这不是第一次有人遇到这个问题。但我试过从bootstraps网站上阅读框架的细节。而且我仍然无法做我需要做的事情。
由于
答案 0 :(得分:3)
<!DOCTYPE html>
<html>
<head>
<title>Welcome to COMPEDDED. </title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 2000
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link href="main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="nav">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
<ul class="nav nav-pills" >
<li role="presentation" class="active"><a href="file:///home/tejvir/Compedded/test.html">Home</a></li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/browse.html">Browse</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="nav nav-pills" >
<li role="presentation" ><a href="file:///home/tejvir/Compedded/signup.html">Sign Up</a></li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/Login.html">Log In</a> </li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="file:///home/tejvir/Firefox_wallpaper.png" alt="firefox">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="file:///home/tejvir/1920x1080.png" alt="ubuntu">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="file:///home/tejvir/1920x1080.png" alt="example">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3> ST microelectronics </h3>
<p> Compiler to compile different embedded codes </p>
<p>
<a href="http://www.tico-india.com"> See how to use this compiler </a>
</p>
</div>
<div class="col-md-4">
<h3> How a compiler works? </h3>
<p> Description Text. </p>
<p>
<a href="http://www.facebook.com"> Link text. </a>
</p>
</div>
<div class="col-md-4">
<h3> Reliability </h3>
<p> From experienced engineers these compilers have been tested and verified several times. </p>
<p>
<a href="http://www.google.com"> Learn more about reliability at Compedded </a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>