Javascript 在转盘上添加暂停/播放功能

如何在此旋转木马上添加播放和暂停功能请帮助我。。 代码如下链接：

1.
2.
3.
4.
5.
6.
7.
8.
9

---

选中此链接

添加以下CSS以暂停悬停

如果您想使用按钮暂停。在这种情况下，唯一的问题是按钮必须位于旋转木马旁边

如果您希望按钮位于其他任何位置，而不是旋转木马旁边，则必须使用JS/jQuery

如果要暂停并继续使用按钮单击

---

如果您想要两个按钮来停止和开始，如果您想要通过纯CSS来完成，唯一的方法就是添加：悬停效果

    #carousel:hover {
    -webkit-animation-play-state : paused !important;
}

如果您想使用jquery，最简单的方法是切换预定义的类

$( "#button" ).click(function() {
  $('#carousel').toggleClass( "carouselStop" );
});

下一种方法是css toogle，但在我的示例中，toogle efect仅适用于1.83 jquery和更早版本（在最新版本中，我们可以使用if编写函数）

---

以下是这三种方法的示例：

很好，它在悬停上工作，但是如果我想在单击按钮时使用按钮来实现相同的功能，它会暂停吗？我想在单击此按钮时，它会暂停。请帮助我，当我单击按钮时，它会暂停检查更新的答案，正如我所说的。检查答案中的最后一个链接，如果我有两个按钮，一个用于播放，一个用于暂停，那么我要做的就是投票否决这个问题。这是一个完全有效的问题，并提供了演示。

$('#playButton').click(function () {
$('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {

$('#homeCarousel').carousel('pause');
});

#carousel:hover {
    -webkit-animation-play-state : paused;
    -moz-animation-play-state : paused;
    -o-animation-play-state : paused;
    animation-play-state : paused;
}

    #carousel:hover {
    -webkit-animation-play-state : paused !important;
}

$( "#button" ).click(function() {
  $('#carousel').toggleClass( "carouselStop" );
});

$("#button2").toggle(
function(){$("#carousel").css({'-webkit-animation-play-state': 'paused'});},
function(){$("#carousel").css({'-webkit-animation-play-state': ''});}
);