Question

对于项目工作，我需要实现带有动画内容的轮播。我使用过bootstrap carousel但是它没有用。我想它只适用于图像。我需要它与div的动画内容。

基本上我的标记就像这样

<div id="myCarousel" class="carousel slide">
    <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>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <div class="screen" id="screen-1" data-video="vid/scene1.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-2" data-video="vid/scene2.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-3" data-video="vid/scene3.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-4" data-video="vid/scene4.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-5" data-video="vid/scene5.mov"></div>
        </div>
    </div>
</div>

我已经包含了bootstrap文件并使用

启动了轮播

$('.carousel').carousel();

.mov文件包含需要一个接一个地显示的动画视频。我将如何实现这一目标？

Answer 1

在轮播上添加视频

而是divs，使用视频标签：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <video id="video1" width="400" height="200" autoplay controls>
                <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
            </video>
        </div>
        <div class="item">
            <video id="video2" width="400" height="200" controls>
                <source src="http://video.webmfiles.org/elephants-dream.webm" type="video/webm">
            </video>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

一个接一个地播放视频

添加一个javascript事件，检查视频是否已结束显示，如果是，则转到下一个视频并播放。（别忘了禁用轮播自动滑动）。

$('#myCarousel').carousel('pause');

var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");

video1.onended = function(e) {
    $('#myCarousel').carousel('next');
    video2.play();
}

jsfiddle

上的示例

带有动画内容的旋转木马

1 个答案: