具有Javascript功能的自举转盘播放和暂停（JQUERY）
我通过了课程，我按照视频和说明进行了所有操作，但是然后出现一个问题，当您单击按钮（暂停符号）时，它不会更改为播放符号。但是有块正在工作
我该怎么办？
Javascript / CSS / HTML
<script>
$(document).ready(function(){
$('#carousel').carousel( { interval: 2000 } );
$("#carouselButton").click(function(){
if ($("#carouselButton").children("span").hasClass('fa-pause')) {
$("#carousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa-pause');
$("#carouselButton").children("span").addClass('fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fa-play')){
$("#carousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fa-play');
$("#carouselButton").children("span").addClass('fa-pause');
}
});
});
</script>body {
background-color: #FAEBD7
}
.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: #8A2BE2 ;
color:floralwhite;
}
.navbar-inner {
background:transparent;
}
.main-info{
margin-bottom: 100px;
}
.mgleft {
margin-left: 10px;
}
.about {
margin-bottom: 50px;
margin-left: 120px;
}
.row-header {
margin: 0px auto;
padding: 0px;
border: 1px;
margin-left: 30px;
}
/*class for separating the two forms which stick together*/
.form {
margin-bottom: 10px;
}
.row-content {
margin:0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
}
.corporate {
margin-top: 150px;
margin-bottom: 50px
}
.footer{
background-color: #D1C4E9;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.Meet {
margin-bottom: 100px
}
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.carousel {
background:#512DA8;
}
.carousel-item {
height: 300px;
}
.carousel-item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
.bottom-reserve{
margin-bottom: 10px;
}
#carouselButton {
right: 0px;
position: absolute;
bottom: 0px;
z-index: 2;
}HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ristorante Con Fusion: About Us</title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/styles.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="./index.html"><img src="/pictures/logo.png" height="30" width="41" ></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="./index.html"><span class="fa fa-home fa-lg"></span> Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
<li class="nav-item "><a class="nav-link" href="#"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#login">
<span class="fa fa-sign-in"></span> Log-in
</a>
</span>
</div>
</div>
</nav>
<div id="login" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-html="true"><strong>Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="reservemodal" class="modal fade" role="dialog">
<div class="modal-dialog modal-md" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-html="true">Reserve a Table </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<label for="Number" class="col-md-3 col-form-label">Number of Guests</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">6</label>
</div>
</div>
<!-- Number of Guests end -->
<div class="form-row">
<label for="Number" class="col-sm-3 col-form-label">Section</label>
<div class="col-sm-8">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success btn-sm active">
<input type="radio" name="options" id="non-smoking" autocomplete="off" checked> Non-smoking
</label>
<label class="btn btn-danger btn-sm">
<input type="radio" name="options" id="smoking" autocomplete="off"> Smoking
</label>
</div>
</div>
</div>
<div class="form-row">
<label for="Number" class="col-md-3 col-form-label">Date and time</label>
<div class="form-row col">
<div class="col">
<input type="datetime-local" class="form-control" placeholder="Date">
</div>
<div class="col">
<input type="time" class="form-control" placeholder="Time">
</div>
</div>
</div>
</div>
<div class="form-row col-md-6 bottom-reserve">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Reserve</button>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-5">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm-3 align-self-center">
<img src="/pictures/logo.png" class="img-fluid">
</div>
<div class="button-group col-12 col-sm-3 col-md">
<a role="button" class="btn btn-warning nav-link btn-lg" href="#top" data-toggle="modal" data-target="#reservemodal">Reserve a Table</a>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="/pictures/uthappizza.png" alt="uthapizza">
<div class="carousel-caption d-none d-md-block">
<h2 class="mt-0">Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-secondary">$4.99</span> </h2>
<p class="d-none d-sm-block">A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="/pictures/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-md-block">
<h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span> </h2>
<p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of live five different salads, six enticing appetizers, six main entrees and five choicesst desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="/pictures/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-md-block">
<h2 class="mt-0">Albero Somayya <span class="badge badge-danger">HOT</span> </h2>
<h3 classs="mt-0">Executive Chef</h3>
<p class="d-none d-sm-block">Award winning three-star Michelin with wide International experience having worked closely with whos-who in the culinary workld, he specializes in creating mouthwatering Indo-Italian fusion experiences.</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="btn group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carouselButton">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12 "> <!-- col-sm-12 col-lg-9 -->
<div class="row">
<div class="col-12 col-sm-4 order-sm-last col-md-2">
<h3>Our Lipsmaking Culinary Creations</h3>
</div>
<div class="media main-info col-8">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="/pictures/uthappizza.png" alt="Uthappizza">
<div class="media-body col-12">
<h2 class="mt-0">Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-secondary">$4.99</span> </h2>
<p class="d-none d-sm-block">A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
</div>
</div>
<!-- <div class="col-4">
<h1>Our Lipsmacking Culinary Creations</h1>
</div> -->
</div>
</div>
<div class="row main-info">
<!-- <div class="media col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div> -->
<div class="col-12 col-sm-4 col-md-2 order-sm-first">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md-9">
<img class="d-flex mr-3 img-thumbnail rounded float-right" src="/pictures/buffet.png" alt="Grand Buffet">
<div class="media-body">
<h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span> </h2>
<p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of live five different salads, six enticing appetizers, six main entrees and five choicesst desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person.</p>
</div>
</div>
</div>
<div class="row">
<div class="media main-info">
<!-- <div class="col-12 col-sm-4 order-sm-last col-md-2">
<h3>Meet Our Culinary Specialists</h3>
</div> -->
<img class="d-flex mr-3 img-thumbnail rounded float-left" src="/pictures/alberto.png" alt="boss">
<div class="media-body col-8">
<h2 class="mt-0">Albero Somayya <span class="badge badge-danger">HOT</span> </h2>
<h3 classs="mt-0">Executive Chef</h3>
<p class="d-none d-sm-block">Award winning three-star Michelin with wide International experience having worked closely with whos-who in the culinary workld, he specializes in creating mouthwatering Indo-Italian fusion experiences.</p>
</div>
</div>
</div>
</div>
<div class="row row-content">
<div class="card">
<h5 class="card-header bg-warning" id="top">Reserve a Table</h5>
<form>
<div class="form-group">
<label for="Number" class="col-md-3 col-form-label">Number of Guests</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">6</label>
</div>
</div>
<!-- Date and Time -->
<div class="form-group">
<label for="Number" class="col-md-3 col-form-label">Date and time</label>
<div class="form-row col">
<div class="col">
<input type="datetime-local" class="form-control" placeholder="Date">
</div>
<div class="col">
<input type="time" class="form-control" placeholder="Time">
</div>
</div>
</div>
<button type="button" class=" mgleft btn btn-primary">Reserve</button>
</form>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i>:
<a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
<a class="btn btn-social-icon btn-google" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#carousel').carousel( { interval: 2000 } );
$("#carouselButton").click(function(){
if ($("#carouselButton").children("span").hasClass('fa-pause')) {
$("#carousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa-pause');
$("#carouselButton").children("span").addClass('fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fa-play')){
$("#carousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fa-play');
$("#carouselButton").children("span").addClass('fa-pause');
}
});
});
</script>
</body>
</html>
1 个答案:
答案 0 :(得分：0)
您不小心使用了两次"crousalButton"。删除第一个参考。
在这里：
<div class="btn group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carouselButton">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
</div>
做到这一点：
<div class="btn group" >
<button class="btn btn-danger btn-sm" id="carouselButton">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？