在轮播上添加暂停/播放功能

Question

如何在该轮播中添加播放和暂停功能，请帮助我。代码位于以下链接：

http://jsfiddle.net/P5295/

<div id="carousel">
    <figure>1</figure>
    <figure>2</figure>
    <figure>3</figure>
    <figure>4</figure>
    <figure>5</figure>
    <figure>6</figure>
    <figure>7</figure>
    <figure>8</figure>
    <figure>9</figure>
</div>

Answer 1

添加以下CSS以在悬停时暂停。 这是演示 。

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

如果要使用按钮暂停， 请尝试以下示例 。 在这种情况下，唯一的问题是按钮必须位于轮播旁边。

如果您希望按钮不位于轮播旁边，则必须像这样使用JS / jQuery。

如果您想暂停并继续使用按钮单击，请尝试以下示例

如果您想要2个按钮来停止和启动，请尝试使用此按钮

Answer 2

如果要通过纯CSS做到这一点，唯一的方法是add：hover效果

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

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

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

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

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

这是这三种方法的示例： http : //jsfiddle.net/gyycV/1/

Answer 3

<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-play"></span>
 </button>
<button id="pauseButton" type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-pause"></span>
</button>

然后，以下JavaScript应该控制任何帧的开始和停止：

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

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

检查此链接http://jsfiddle.net/KyleMit/XFcSv/