我的网页中有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>
答案 0 :(得分：0)
检查
<!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>