Question

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

<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以暂停悬停。 Here is the demo

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

Try this example如果您想暂停使用按钮。在这种情况下，唯一的问题是按钮必须在Carousel旁边。

如果您希望按钮位于旋转木马旁边的其他位置，则必须使用JS / jQuery like this。

如果您想暂停并继续使用按钮点击try this example

如果您想要2个按钮停止并开始，try this one

Answer 2

如果你想通过纯CSS来实现这一点，那就是add：hover effect

    #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/

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

3 个答案: