自制 jquery youtube 画廊不会工作答案

【问题标题】：homemade jquery youtube gallery wont work自制 jquery youtube 画廊不会工作
【发布时间】：2023-03-09 01:45:01
【问题描述】：

我已经尝试使用 .toggle 而不是 .slidetoggle 以防万一这是问题 #v1 设置为 display:none;所以它不会出现，直到我也想要它我不知道我哪里出错了，欢迎和感谢任何建议。

window.onload;
$(document).ready(function() {
  for (true) {
    $('#v1').add('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/v0DJNsqVUPI?rel=0&amp;controls=0&amp;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 视频的画廊，并且我能想到的唯一方法是在页面加载后立即停止视频自动播放，如果有更简单更有效的方法来实现，请使用 .add这我很想知道，因为在网上搜索后我找不到任何东西。预先感谢您提供的任何帮助。

【问题讨论】：

到底是什么问题？
我遇到的问题是视频根本无法加载
#v1 里面的视频

标签： javascript jquery html css youtube

【解决方案1】：

好的，不知道你想用for(true) 完成什么，但把它拿出来并将add(...) 更改为append(...) 可以让你的代码至少加载视频，希望这会有所帮助。这是一个工作示例：https://jsfiddle.net/4n2my6za/

【讨论】：

我试图让它不停地运行，因为一旦我添加了其他图像和视频，它就会自行轮播，直到页面关闭，谢谢你的帮助，我会尝试另一种方法