更改可視性更改後的位置

Question

我試圖在div變得可見時刷新html頁面...不確定我出錯的位置。 divslide.js在設定的時間將顯示樣式從none切換到inline。我希望帶有最終id的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

​​

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/