播放和暫停按鈕在輪播中不起作用？
[英]play and pause button is not working in carousel?
問題描述
我正在引導程序中使用 jquery 和 javascript 執行輪播播放和暫停。 我已經編寫了代碼，但沒有找到我錯過的地方。 這是可能讓您發現我的錯誤的完整代碼。 問題是播放和暫停按鈕在輪播的范圍內，按鈕通常給出的行為在這里是不一樣的。 對於當前情況，按鈕位於 prev 按鈕下方並執行與 prev 相同的操作，即顯示前一個圖像。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid"
src="img/uthappizza.png" alt="uthappizza">
<div class="carousel-caption d-none d-md-block">
<h2>Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p class="d-none d-sm-block">A unique combination of Indian Uthappam</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-md-block">
<h2>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 five different salads.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-md-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
<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>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<div class="btn-group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
<button class="btn btn-danger btn-sm" id="carousel-play">
<span class="fa fa-play"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/uthappizza.png" alt="uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<div class="media">
<img class="d-flex order-sm-last mr-3 img-thumbnail align-self-center" src="img/buffet.png" alt="buffet">
<div class="media-body">
<h2 class="mt-0">Weekend Grand Buffet<span class="badge badge-danger">NEW</span></h2>
<p>Featuring mouthwatering combinations with a choice of five different salads.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm col-md order-sm-first">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="alberto">
<div class="media-body">
<h2 class="mt-0">Alberto Somayya<span class="badge badge-danger">Exclusive</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 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(){
$('#mycarousel').carousel({ interval : 2000 });
$('#carousel-pause').click(function(){
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function(){
$('#mycarousel').carousel('cycle');
});
});
</script>
</body>
</html>
輪播播放和暫停的正確行為。
3 個解決方案
解決方案1
0 2020-05-03 14:59:22
是的，伙計，我在學習coursera課程時也遇到了問題。 這不是 jquery 的問題。 將“carouselButton”的“z-index”設置為 2 或更高，它應該可以工作
解決方案2
0 2020-07-11 17:04:22
在完成您的腳本后，我發現您選擇退出代碼中的一個重要細節，即您沒有添加 pause: false after interval:2000。 所以你的腳本代碼應該以這種方式呈現。
<script>
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 2000, pause: false } );
$("#carousel-pause").click(function(){
$("#mycarousel").carousel('pause');
});
$("#carousel-play").click(function(){
$("#mycarousel").carousel('cycle');
});
});
</script>
或者你可以利用這個
<script>
$('#mycarousel').carousel({
interval: 1500,
pause: false
});
$('#carousel-pause').click(function() {
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function() {
$('#mycarousel').carousel('cycle');
});
</script>
無論哪種方式，當您單擊暫停或播放按鈕時，您的代碼都會正常運行
解決方案3
0 2020-07-11 21:17:58
是的...設置z-index: 1; 到carouselButton ...它肯定會起作用。
如何通過單個按鈕控制自舉輪播的播放/暫停
[英]How can we control the play/pause of the bootstrap carousel with single button
播放/暫停按鈕不會播放音頻，它更像是一個播放/停止按鈕
[英]play/pause button won't play audio, it is working more as a play/stop button instead
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.