带有 Javascript 功能的引导轮播播放和暂停
Posted
技术标签:
【中文标题】带有 Javascript 功能的引导轮播播放和暂停【英文标题】:Bootstrap carousel with Javascript function to play and pause 【发布时间】:2020-11-01 12:25:32 【问题描述】:我在引导程序的轮播类中遇到问题。我已经定义了一个默认为暂停按钮的按钮,然后我在该按钮上使用 javascript 函数来控制轮播,就像单击时一样,图标应该变为播放并且轮播应该停止循环,但是 .click(function)单击按钮时不起作用,而是在我将鼠标放在按钮上时暂停轮播。 请帮我解决这个问题。
$(文档).ready(函数() $("#mycarousel").carousel( 间隔:2000 ); $("#carouselButton").click(function() if ($("#carouselButton").children("span").hasClass('fa-pause')) $("#mycarousel").carousel("暂停"); $("#carouselButton").children("span").removeClass('fa-pause'); $("#carouselButton").children("span").addClass('fa-play'); else if ($("#carouselButton").children("span").hasClass('fa-play')) $("#mycarousel").carousel("cycle"); $("#carouselButton").children("span").removeClass('fa-play'); $("#carouselButton").children("span").addClass('fa-pause'); ); );【问题讨论】:
对不起,我忘了提供完整的代码。我已经完成了轮播中的上一个和下一个按钮。我只是遇到了上面问题中提到的暂停和播放按钮的问题。 【参考方案1】:好问题。我也无法让 pause:null
按您的意愿工作。但是进一步挖掘,我得到了一个可行的解决方案......
carousel
div 上切换data-interval
属性
但这并没有启动循环,要触发启动...我们必须手动悬停和悬停...或者自动执行(我们这样做了)
但是由于通过 jQuery 添加/删除此属性存在一些滞后,我们(hackish-ly)添加了一个 setTimeout
来解决这个问题
工作sn-p如下:
$(document).ready(function()
$('#playPause').click(function()
if ($("#myCarousel").attr("data-interval"))
$("#myCarousel").removeAttr("data-interval");
$(".carousel-item>.active").removeAttr("active");
setTimeout(function()
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
, 500);
else
$("#myCarousel").attr("data-interval", "500");
setTimeout(function()
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
$("#myCarousel").trigger('mouseleave');
, 1000);
);
// Enable Carousel Indicators
$(".item1").click(function()
$("#myCarousel").carousel(0);
);
$(".item2").click(function()
$("#myCarousel").carousel(1);
);
$(".item3").click(function()
$("#myCarousel").carousel(2);
);
// Enable Carousel Controls
$(".carousel-control-prev").click(function()
$("#myCarousel").carousel("prev");
);
$(".carousel-control-next").click(function()
$("#myCarousel").carousel("next");
);
);
/* Make the image fully responsive */
.carousel-inner img
width: 100%;
height: 100%;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container mt-3">
<button type='button' id='playPause'>Play / Pause</button>
<!-- The carousel -->
<div id="myCarousel" class="carousel slide mt-4">
<!-- Indicators -->
<ul class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" >
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" >
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" >
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
【讨论】:
感谢您的回答。抱歉是我的错,我应该提供完整的代码,因为我已经完成了您提供的上述功能。我有额外的按钮来控制轮播的暂停和播放,但它不起作用。【参考方案2】:我相信您留下了具有相同 id 的未注释 div:
<div class="btn-group" id="carouselButton">
那么您的具有相同 id 的按钮就不起作用了:
<button class="btn btn-danger btn-sm" id="carouselButton">
我遇到了同样的问题。代码来自Coursera, Front-End Web UI Frameworks and Tools: Bootstrap 4 Week 4, Exercise (Instructions): More Bootstrap and JQuery
【讨论】:
【参考方案3】:下面的答案效果很好,并且在 JavaScript 中可以满足不同的口味
function buttonFlip()
var parentButton = document.getElementById("carouselButton");
var childSpan = document.getElementById("carouselButton_span");
if (parentButton.contains(childSpan) && childSpan.classList.contains("fa-pause"))
$("#mycarousel").carousel('pause');
childSpan.classList.remove("fa-pause");
childSpan.classList.add("fa-play");
else
$("#mycarousel").carousel('cycle');
childSpan.classList.remove("fa-play");
childSpan.classList.add("fa-pause");
【讨论】:
【参考方案4】:如果这是来自 coursera 的引导课程第 4 课,我遇到了同样的问题。
转到这部分并更改 ID,在我的情况下,我将 carousel-style 作为 id。然后转到样式表并将#carouselButton 更改为您在btn-group 中命名的id。
它应该在那之后工作。
P.S老师不给你解释,但你需要将播放图标更改为“fas fa play”作为一个班级
它应该看起来像这样。
div class="btn-group" id="carousel-style">
<button class="btn btn-light btn-sm" id="carouselButton">
<span class="fa fa-pause"></span>
</button>
</div>
Javascript 应该如下所示:
<script>
$(document).ready(function()
$('#mycarousel').carousel( interval: 2000 );
$("#carouselButton").click(function()
if ($("#carouselButton").children("span").hasClass('fa fa-pause'))
$("#mycarousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa fa-pause');
$("#carouselButton").children("span").addClass('fas fa-play');
else if ($("#carouselButton").children("span").hasClass('fas fa-play'))
$("#mycarousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fas fa-play');
$("#carouselButton").children("span").addClass('fa fa-pause');
);
); </script>
【讨论】:
以上是关于带有 Javascript 功能的引导轮播播放和暂停的主要内容,如果未能解决你的问题,请参考以下文章