Question

我想在网页上设置类似数字标牌的效果，但我不知道该怎么做，请在这里提供一些帮助。

我在页面中有几个div，它是区域的占位符。对于每个地区，里面都有多种媒体。

对于规定的持续时间，当前媒体将播放其他媒体将被隐藏（或销毁），后续媒体将出现在同一位置。

最重要的是，当最后一个元素到达时，我将再次重播整个序列。所以网页不断滚动。

我为这个案子做了一个JSFiddle，请帮忙解决这个问题，并且在我糟糕的编码上花了一天的时间......

HTML

 <body>
        <div class='timecontrol region1 position' >
            <video duration='30' width="320" height="240" controls class='position'>
              <source src="movie.mp4" type="video/mp4">
            </video>
            <video duration='0' width="320" height="240" controls class='position'>
              <source src="movie.mp4" type="video/mp4">
            </video>    
        </div>
        <div class='timecontrol region2 position'>
            <img class='position' duration='10' src='1.gif'></img>
            <img class='position' duration='20' src='2.gif'></img>
        </div>  
        <div class='readyState'></div>
        </body>

的Javascript

function checkContainer () {
  if($('#readyState').is(':visible')){ //if the container is visible on the page
    $('.timecontrol').each(function() {
        var elements = new Array();
        elements = $(this).children().toArray();
        for (element in elements){

            $(element).not(element).remove();
            $(element).show();


$(element).delay(parseInt($(element).attr('duration'))*1000).hide(0);
            }
        });   
      } 
    }   
        $( document ).ready(function() {
            checkContainer();
    });

CSS

.position{
    position:absolute;
}

.region1{
    position:absolute;
    top:0px;
    left:0px;
    height:320px;
    width:240px;
}

.region2{
    position:absolute;
    top:px;
    left:320px;
    height:320px;
    width:100px;
    border:1px;
}

Answer 1

recursive function（一个自我调用的函数）可能比.each()或for循环更适合您的需求。以下是我将如何使用递归：

jsFiddle

function checkContainer() {
    if ($('#readyState').is(':visible')) { //if the container is visible on the page
        $('.timecontrol').each(function () {
            change($(this).children());
        });
    }
}
function change(elements, index) {
    index = !index || index > elements.length - 1 ? 0 : index; // if index is higher than the index of the last element or not set at all, default to 0

    var element = $(elements[index]);
    var timeframe = parseInt(element.attr('duration')) * 1000;
    element.siblings().hide();
    element.show();
    if (element[0].tagName.match(/video/i)) element[0].play();
    setTimeout(function () {
        element.hide(0);
        if (element[0].tagName.match(/video/i)) element[0].pause();
        change(elements, index+1); // recursively call this same functoin passing in the elements and the index of the next one up
    }, timeframe);

}
$(document).ready(function () {
   checkContainer();
});

.position {
    position:absolute;
}
.region1 {
    position:absolute;
    top:0px;
    left:0px;
    height:320px;
    width:240px;
}
.region2 {
    position:absolute;
    top:px;
    left:320px;
    height:320px;
    width:100px;
    border:1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='timecontrol region1 position'>
    <video duration='6' width="320" height="240" controls class='position'>
        <source src="http://stream.flowplayer.org/functional.mp4" type="video/mp4">
    </video>
    <video duration='6' width="320" height="240" controls class='position'>
        <source src="http://stream.flowplayer.org/bauhaus.mp4" type="video/mp4">
    </video>
</div>
<div class='timecontrol region2 position'>
    <img class='position' duration='10' src='https://placeimg.com/350/150/any'></img>
    <img class='position' duration='20' src='https://placeimg.com/350/150/animals'></img>
</div>
<div id='readyState'></div>

jQuery元素像div下的播放列表一样循环

1 个答案:

jsFiddle