可視性の変更後の場所の更新

Question

divが表示されるときにhtmlページをリフレッシュしようとしています...どこが間違っているのかわかりません。 divslide.jsは、設定された時刻に表示スタイルをなしからインラインに切り替えます。私は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

​​

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/