每 10 秒交替 <div> 内容无效

Question

功能：

我在同一页面上有 2 个差异 <div> 内容，因此，内容 A 在内容 B 显示之前显示，循环将再次重复。因此，流程如下所述：

内容A（显示10秒）->内容B（显示10秒）->内容A（显示10秒）->内容B（显示10秒）

因此，内容的显示将无限循环重新迭代显示。

内容A -> jplayer内容列表内容 B -> 静态 <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

好吧，如果您正在寻找每 10 秒后无限循环切换 div，请检查此提琴手。 https://jsfiddle.net/nalinkaggarwal/vj01xezm/`

Answer 2

试试这个：

/*** 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);
}

/*** 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;}

<!-- *** 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>

参考（请点赞）：

jQuery jPlayer change media not working

每 10 秒交替 <div> 内容无效

Alternate <div> content at every 10 seconds is not working

html

javascript

jquery

setinterval