在我的网页中有 4 个轮播，第一个上的指示器有效，但其他指标不起作用。我已经在所有轮播中放置了类似的代码。幻灯片正在工作，我的意思是循环正在进行，但除了第一个之外，这些按钮在所有轮播中既没有指示器也没有左右按钮。 我想问的另一件事是，我只想要标题应该滑动而不是轮播中的图像，我该怎么做？
这是我的代码...
谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Galada' rel='stylesheet'>
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.head
{
font-family:Galada;
color:white;
padding-top: 50px;
font-size: 100px;
}
.paris, .russia, .newyork, .venice {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.paris
{
background-image: url("if.jpg");
min-height:500px;
}
.russia
{
background-image: url("rsa.jpg");
min-height:500px;
}
.newyork
{
background-image: url("w.jpg");
min-height:500px;
}
.venice
{
background-image: url("vnc.jpg");
min-height:500px;
opacity:0.9;
background-position:center top;
}
.carousel-inner > .item > img {
width:640px;
height:360px;
}
.carousel {
width:640px;
height:360px;
}
.carousel-inner1 > .item1 >{
width:1200px;
height:500px;
}
.carousel1 {
width:1200px;
height:500px;
}
</style>
<body>
<!--navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="font-family:galada; font-size:50px; color:white; ">Rovers</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Today's Special<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Buzz</a></li>
<li><a href="#">Gossip</a></li>
<li><a href="#">News Heads</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
</ul>
<form class="navbar-form navbar-right" action="">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" name="search">
</div>
<button type="Submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>
</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="nav.html"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<!--newyork area-->
<div class="newyork">
<div class="container head">
<dic class="caption">
<p> Rovers...<p>
<div class="col-md-2">
</div>
<div class="col-md-10">
<p style="text-align:right; font-size:75px;"> Changes your way of living.</p>
</div>
</div>
</div>
</div>
<!--carousel & Our Services-->
<div style="padding:50px 80px;">
<div class="row">
<!--our services-->
<div class="col-md-6">
<h5 style="font-family:galada; text-align:left; color:black; font-size:40px;">Our Services</h5>
<p style="color:black;font-size:15px;">Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
<!--carousel-->
</div>
<div class="col-md-6" style=" padding-bottom: 50px;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="map.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="map2.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="trvl.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="ocn.jpg" alt="food" width="500" height="345">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!--paris-->
<div class="paris">
</div>
<!--hotels & Carousel-->
<div style="padding:50px 80px;">
<div class="row">
<!--hotels-->
<div class="col-md-6">
<h5 style="font-family:galada; text-align:left; color:black; font-size:40px;">Hotels</h5>
<p style="color:black;font-size:15px;">Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
<!--carousel-->
</div>
<div class="col-md-6" style=" padding-bottom: 50px;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="hotels.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="hotel1.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="hotel2.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="hotel3.jpg" alt="food" width="500" height="345">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!--venice-->
<div class="venice">
<div id="myCarousel" class="carousel slide" data-ride="carousel1" style="width: 1400px; height: 500px;" >
<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>
<div class="carousel-inner1" role="listbox">
<div class="item1 active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>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>
</div>
</div>
</div>
<div class="item1">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item1">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item1">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--carousel & food-->
<div style="padding:50px 80px;">
<div class="row">
<!--food-->
<div class="col-md-6">
<h5 style="font-family:galada; text-align:left; color:black; font-size:40px;">Foodings</h5>
<p style="color:black;">hhfgtttygchggyfyy</p>
<h5 style="font-family:galada; text-align:right; color:black; font-size:40px;">Foodings</h5>
<p style="color:black;text-align:right;">hhfgtttygchggyfyy</p>
<h5 style="font-family:galada; text-align:left; color:black; font-size:40px;">Foodings</h5>
<p style="color:black;">hhfgtttygchggyfyy</p>
<h5 style="font-family:galada; text-align:right; color:black; font-size:40px;">Foodings</h5>
<p style="color:black;text-align:right;">hhfgtttygchggyfyy</p>
</div>
<!--carousel-->
<div class="col-md-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="food11.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="food2.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="food3.jpg" alt="food" width="500" height="345">
</div>
<div class="item">
<img src="food4.jpg" alt="food" width="500" height="345">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!--russia area-->
<div class="russia">
</div>
<!--About Us & Footer-->
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap()
{
var mapCanvas = document.getElementById("map");
var mapOptions =
{
center: new google.maps.LatLng(51.5, -0.2), zoom: 10
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</div>
</div>
</div>
</body>
</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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<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="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
<li data-target="#myCarousel1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel2" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel3" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel3" data-slide-to="1"></li>
<li data-target="#myCarousel3" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel3" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel3" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>