Javascript 如何在jQuery幻灯片放映中使用iframe

我有一个使用jQuery的全屏背景幻灯片，大约有7幅图像，还有一个显示youtube视频的iframe

当iframe幻灯片出现时，它只显示底部，页面的其余部分为白色

当下一张幻灯片出现时，iframe不会淡出并一直保持在那里，直到幻灯片放映重置（到第一张幻灯片）

此外，iframe没有响应，因此当我单击它时，它不会播放

请帮忙

        HTML

        <div id="slider">
        <img id="1" src="Images/IMG_2615.png" style="hight:1048px; width:1571px;" alt="" />
        <img id="2" src="Images/IMG_2616.png" style="hight:1048px; width:1571px;" alt="" />
        <img id="3" src="Images/IMG_2619.png" "hight:1048px; width:1571px;" alt="" />
        <iframe id="4" width="100%" height="100%" src="http://www.youtube.com/embed/KVwSP51KVO8?wmode=opaque" frameborder="0" class="youtube-video" allowfullscreen></iframe>
        <img id="5" src="Images/IMG_2620.png" "hight:1048px; width:1571px;" alt="" />
        <img id="6" src="Images/IMG_4189.JPG" "hight:1048px; width:1571px;" alt="" />
        <img id="7" src="Images/IMG_4245.JPG" "hight:1048px; width:1571px;" alt="" />
        <img id="8" src="Images/IMG_4283.JPG" "hight:1048px; width:1571px;" alt="" />
    </div>
    <!-- Background Slideshow -->`

CSS

#slider {
overflow: hidden;
/* Set rules to fill background */
min-height: 100%;
min-width: 100%;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -1;}

#slider > img {
float: left;
display: none;
//height: 1048px;
//width: 1571px;}

#slider iframe {
float: left;
//display: none;}



JS

 sliderInt = 1;
 sliderNext = 2;

 $(document).ready(function(){
 $('#slider>Img#1').fadeIn(1000);
 startSlider();
 });


function startSlider() {
count = $('#slider>Img').size();

loop = setInterval(function () {

    if(sliderNext > count) {
        sliderNext = 1;
        sliderInt = 1;
    }

    $('#slider>Img').fadeOut(1000);
    $('#slider>Img#'+ sliderNext).fadeIn(1000);

    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;
}, 7000)

HTML
`
CSS
#滑块{
溢出：隐藏；
/*设置填充背景的规则*/
最小高度：100%；
最小宽度：100%；
/*设置比例缩放*/
宽度：100%；
高度：自动；
/*设置定位*/
位置：固定；
排名：0；
左：0；
z-索引：-1；}
#滑块>img{
浮动：左；
显示：无；
//高度：1048px；
//宽度：1571px；}
#滑动框架{
浮动：左；
//显示：无；}
JS
滑块=1；
sliderNext=2；
$（文档）.ready（函数（）{
$（'#slider>Img#1'）.fadeIn（1000）；
startSlider（）；
});
函数startSlider（）{
count=$（'#slider>Img'）。size（）；
循环=设置间隔（函数（）{
如果（sliderNext>count）{
sliderNext=1；
滑块=1；
}
$（“#滑块>Img”）.fadeOut（1000）；
$（'#slider>Img#'+sliderNext）.fadeIn（1000）；
sliderInt=sliderNext；
sliderNext=sliderNext+1；
}, 7000)

---

}

将img+iframe放到ul中，然后将滑块更改为仅针对ul的li，而不是您正在执行的imgnow@madalinivascu我已经将img+iframe放入ul，但同样的事情发生了，所以我决定调整I框架的大小，这似乎可行，而且I框架现在正在淡出，所以这很好，但现在由于某种原因，我的img会淡出，但不会出现，它们只是出现，而且iframe仍然没有响应，所以当我点击它时，不会发生任何事情。此外，我的img没有正确安装我该如何做我尝试将样式标记放入img标记中，并尝试使用css设置宽度和高度，但没有任何效果：(