Question

当我看到div时，我正在尝试刷新html页面...不确定我哪里出错了。 divslide.js在设定的时间将显示样式从none切换为内联。我希望带有id final的div刷新页面，以便它循环回每个div。

这是html ...

<div id="video" class="mySlides"><video autoplay><source src="icx.mp4" 
type="video/mp4"></video></div>
<div id="widescreen" class="mySlides">
<!--<div id="written"><video autoplay><source src="written.mp4" 
type="video/mp4"></video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>-->
</div>

<div id="final" class="mySlides"></div>

我已经链接了jquery 3.1.1并尝试使用...

if($('#final').is(':visible'))
{
location.reload();
}

看起来非常基本，但它不起作用。

Answer 1

重新启动幻灯片的方式是......好吧......坚果。

如果没有你的js，那么这里基本上就是你想做的事。

HTML

<div id="div1" class="video"><video id="video1"><source src="tbd.mp4" type="video/mp4">

CSS

div {
  height: 100px;
  width: 300px;
  display: none;
}
#div1 {
  background-color: red;
  display: block;
}
#div2 {
  background-color: blue;
}
#div3 {
  background-color: orange;
}
#div4 {
  background-color: green;
}

的jQuery

// Create an array of the video divs.
var videos = [
  "div1",
  "div2",
  "div3",
  "div4"
]
var videos = [
  ["div1", 4000],
  ["div2", 6000],
  ["div3", 11000],
  ["div4", 5900],
]

// Initate a counter at 1 because you're going to show the first video by default.
var counter = 1;
setInterval(function(){
    // Hide all the video divs
    $(".video").hide();
  // Show the video div based on the counter
  $("#" + videos[counter][0]).show();
  // Reset the video to the beginning
  $("#video" + [counter]).load();
  // Play the video
  $("#video" + [counter]).play();

  //Increment the counter if there are still more divs to show, otherwise reset it to 0
  counter == videos.length-1 ? counter = 0 : counter++;
}, videos[counter][1]);

JSFiddle在行动中展示它：https://jsfiddle.net/nky4n2cx/

可见性更改后刷新位置

1 个答案: