Question

功能性：

我在同一页面上有2个diff <div>内容，因此，在显示内容B之前显示内容A，并且循环将再次重新迭代。因此，该过程如下所述：

内容A（显示10秒） - ＆gt;内容B（显示10秒） - ＆gt;内容A（显示10秒） - ＆gt;内容B（显示10秒）

因此，内容的显示将在无限循环的重复中显示。

内容A - ＆gt;一个jplayer内容列表内容B - ＆gt;静态<div>内容

已完成的工作：

我已设置以下内容：

为内容A：

创建了<div>

<div id="M_Start" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

    <!--Video Div for Content A-->
    <div id="Start_Video" style="position:absolute;"></div>
</div>

为内容B创建<div>：

<div id="I_Page" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
    <table cellspacing="0" cellpadding="0" width="1080">
        <tr>
            <td width="1080"  align="center">

                <div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>

            </td>
        </tr>
    </table>
</div>

其次，我已经为两个内容完成了setTimeInterval，这样在10秒后，内容将会切换。我的代码如下所示：

var videoList = ["lib/video/MainBackground.mp4", "lib/video/I.mp4"];
var videoIndex = 0;

setInterval(function() {

  $("#M_Video").jPlayer({
    ready: function() {
      console.log("currentPlaying " + videoList[videoIndex]);
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    ended: function() {
      videoIndex++;
      console.log("NewCurrent:" + videoIndex);
      console.log("current :" + videoList[videoIndex]);
      if (videoIndex >= videoList.length) {
        console.log("Next" + videoIndex);
        videoIndex = 0;
        
        //ContentB to fadeIn
        $('#IPage').fadeIn({ duration: slideDuration, queue: false });
      }
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    swfPath: "javascript",
    muted: true,
    loop: true,
    supplied: "webmv, ogv, m4v",
    size: {
      width: 1080,
      height: 1920
    }
  });
  $("#M_Video").show();
}, 10000);

<!--Content A -->
<div id="M_Start" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

  <!--Video Div-->
  <div id="M_Video" style="position:absolute;"></div>

  <button class="MilleniaStart" onclick="Start()"></button>
</div>


<!--Content B-->
<div id="IPage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
  <table cellspacing="0" cellpadding="0" width="1080">
    <tr>
      <td width="1080" align="center">

        <div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>

      </td>
    </tr>
  </table>
</div>

问题：

在10秒之后切换内容后，内容切换停止，并且不再重新切换内容。含义：在内容A切换到内容B后，它停止，当正确的行为应该是内容A切换到内容B，然后在切换到内容B和内容A之前切换回内容A，重复迭代应该永远不会停止

因此，我确实需要一些帮助。请帮忙。我不知道该怎么办或出了什么问题。

谢谢。

Answer 1

试试这个：

＆＃13;

/*** javascript/jQuery: ***/

var videoList = ["http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4"];
var videoIndex = 0;
console.log("current: " + videoList[videoIndex]);

$("#M_Video").jPlayer({
  ready: function() {
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
  },
  swfPath: "javascript",
  muted: true,
  loop: true,
  supplied: "webmv, ogv, m4v",
  size: {
    width: 500,
    height: 400
  }
});

setTimeout(swapVideo, 10000);

function swapVideo(){
  videoIndex++;
  if (videoIndex >= videoList.length) {
//console.log("Next < " + videoIndex);
    videoIndex = 0;
  }
//console.log("NewCurrent:" + videoIndex);
  $("#M_Video").jPlayer("destroy");
  $("#M_Video").jPlayer({
    ready: function() {
console.log("current: " + videoList[videoIndex]);
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
  },
  swfPath: "javascript",
  muted: true,
  loop: true,
  supplied: "webmv, ogv, m4v",
  size: {
    width: 500,
    height: 400
  }
  });
  setTimeout(swapVideo, 10000);
}

＆＃13;

/*** CSS: ***/

.divs{position:absolute;top:0;left:0;width:500px;height:400px;background-repeat:no-repeat;}

#M_Start{z-index=1;}
  #M_Video{position:absolute;}

#IPage{z-index=3;display:none;}
  #i_page_content{height:400px;width:500px;overflow-y:scroll;overflow-x:hidden;z-index:2;}

＆＃13;

<!-- *** HTML: *** -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>

<!--Content A -->
<div id="M_Start" class="divs" align="center">
  <div id="M_Video"></div>
  <button class="MilleniaStart" onclick="Start()"></button>
</div>

<!--Content B-->
<div id="IPage" class="divs" align="center">
  <table cellspacing="0" cellpadding="0" width="500">
    <tr><td width="500" align="center"><div id="i_page_content"></div></td></tr>
  </table>
</div>

＆＃13;

参考（请upvote）：

jQuery jPlayer change media not working

Answer 2

好吧，如果你正在寻找只用无限循环每10秒切换一次div，请检查这个小提琴手。 https://jsfiddle.net/nalinkaggarwal/vj01xezm/`

每隔10秒替换<div>内容无效

2 个答案: