0
問題があった場合に.slidetoggleの代わりに.toggleを使ってみました。＃v1がdisplay：noneに設定されています。だから私はそれが欲しいまで表示されません私はどこに間違っていたかわからないあなたのアドバイスを歓迎していただければ幸いです。自家製jquery youtubeギャラリーは役に立たない
window.onload;
$(document).ready(function() {
for (true) {
$('#v1').add('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/v0DJNsqVUPI?rel=0&controls=0&showinfo=0?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>');
$('#v1').toggle().delay(2000);
$('#v1').slidetoggle().empty();
}
});
私のjavascriptファイルここ
<!DOCTYPE html>
<html>
<head>
<title>CG Hartlepool</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="offersbar">
Offers bar
</div>
<div id="ebayfeed">
ebay feed
</div>
<div id="utube">
<div id="v1" class="fill"></div>
<img class="fill" id="img1" src="images/buybacklaptop.jpg"/>
<img class="fill" id="img2" src="images/cashforgold.jpg"/>
<img class="fill" id="img3" src="images/holdittablet.jpg"/>
<img class="fill" id="img4" src="images/buyitback.jpg"/>
<img class="fill" id="img5" src="images/chequecashing.jpg"/>
<img class="fill" id="img6" src="images/sellitxbox.jpg"/>
<div id="v2" class="fill"></div>
<img class="fill" id="img7" src="images/buybacktablet.jpg"/>
<img class="fill" id="img8" src="images/cashgold.jpg"/>
<img class="fill" id="img9" src="images/tradeconsole.jpg"/>
<img class="fill" id="img10" src="images/buyitbacklaptop.jpg"/>
<img class="fill" id="img11" src="images/holdit.jpg"/>
<img class="fill" id="img12" src="images/buyconsole.jpg"/>
<div id="v3" class"fill"></div>
<img class="fill" id="img13" src="images/holditguitar.jpg"/>
<img class="fill" id="img14" src="images/buyitlaptop.jpg"/>
<img class="fill" id="img15" src="images/selltablet.jpg"/>
<img class="fill" id="img16" src="images/spreadcostguitar.jpg"/>
<img class="fill" id="img17" src="images/cashgoldsilver.jpg"/>
<img class="fill" id="img18" src="images/travelmoney.jpg"/>
</div>
<div id="news">
news
</div>
</body>
</html>
があるが、私のhtmlで、以下の私のcss
*{
margin: 0;
padding: 0;
border: 0;
}
body{
height: 100%;
width: 100%;
background-color: #2F3646;
}
#offersbar{
top: 0;
width: 100%;
height: 10%;
background-color: white;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#ebayfeed{
top: 10%;
left: 0;
width: 15%;
height: 80%;
background-color: blue;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#utube{
top: 10%;
left: 15%;
width: 85%;
height: 80%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#fill{
height: 100%;
max-width: 100%;
}
#news{
top: 90%;
left: 0;
width: 100%;
height: 10%;
background-color: white;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#v1{
display: none;
}
#v2{
display: none;
}
#v3{
display: none;
}
#img1{
display: none;
}
#img2{
display: none;
}
#img3{
display: none;
}
#img4{
display: none;
}
#img5{
display: none;
}
#img6{
display: none;
}
#img7{
display: none;
}
#img8{
display: none;
}
#img9{
display: none;
}
#img10{
display: none;
}
#img11{
display: none;
}
#img12{
display: none;
}
#img13{
display: none;
}
#img14{
display: none;
}
#img15{
display: none;
}
#img16{
display: none;
}
#img17{
display: none;
}
#img18{
display: none;
}
である、それはjQueryのに来るとき、私は決して専門家ですが、私は持っています周りを見回して、どこが間違っているのかわからない。これはおそらく基本的な間違いです。私は画像とYouTubeのビデオの両方で動作するギャラリーを作ろうとしていますが、ロードされたページがすぐにビデオの自動再生を停止するために考えることができる唯一の方法は、これは私が物事を見つけることができなかったインターネットを精練した後として知りたいです。与えられた助けをあらかじめありがとうございます。
正確に何が問題なのですか？ – Pat
私が抱えている問題は、ビデオがまったく読み込まれないということです。 –
ビデオは＃v1の中にあります –