javascript - slider 覆盖 slider 后的内容。为什么？

Question

我正在使用一个工作正常的滑块，但问题是在滑块的2-3张幻灯片上覆盖了滑块之后的网页内容。我不想固定滑块的高度，但也想在每一次滑块之后显示滑块内容。该代码在下面共享。

<script type="text/javascript">
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
    if(!d.getElementById || !d.createElement)return;
    imgs = d.getElementById("gallery").getElementsByTagName("li");
    for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    imgs[0].style.display = "block";
    imgs[0].xOpacity = .99;
    setTimeout(so_xfade,1000);
}
function so_xfade() {
    cOpacity = imgs[current].xOpacity;
    nIndex = imgs[current+1]?current+1:0;
    nOpacity = imgs[nIndex].xOpacity;
    cOpacity-=.05; 
    nOpacity+=.05;
    imgs[nIndex].style.display = "block";
    imgs[current].xOpacity = cOpacity;
    imgs[nIndex].xOpacity = nOpacity;
    setOpacity(imgs[current]); 
    setOpacity(imgs[nIndex]);
    if(cOpacity<=0) {
        imgs[current].style.display = "none";
        current = nIndex;
        setTimeout(so_xfade,3000);
    } else {
        setTimeout(so_xfade,50);
    }
    function setOpacity(obj) {
        if(obj.xOpacity>.99) {
            obj.xOpacity = .99;
            return;
        }
        obj.style.opacity = obj.xOpacity;
        obj.style.MozOpacity = obj.xOpacity;
        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
    }
}
</script>
<style type="text/css">
#slider {max-height:700px;background:url(https://lh6.googleusercontent.com/-LLFEz-EyGbk/UyV9SbGPuhI/AAAAAAAAMgY/JNqf8X11dbk/s220/slider-loader.gif) #2e2e2e no-repeat 50% 50%;}
#gallery {padding:0;position:relative;margin:0 auto;max-width:1920px;}
#gallery li {list-style-type:none;width:100%;display:none;position:absolute;top:0;left:0;}
.gallery_img img {max-width:100%;}
.gallery_text {width:100%;margin:0 auto;text-align:center;position:absolute;top:-20%;left:0%;}
.gallery_text h2 {padding:0;line-height:70px;font-size:50px;font-weight:inherit;color:#fff;}
.gallery_text p {margin:20px 0;line-height:24px;font-size:20px;color:#ffee66;}
.gallery_text a {background:#77aa00;display:inline-block;padding:20px 70px;font-size:18px;font-weight:700;text-transform:uppercase;color:#fff;text-decoration:none;}
.gallery_text a:hover {background:#fff;color:#000;}
</style>
This Is The DIV Or Text Before The Slider.
<div class='clear'/>
<div id='slider'>
<ul id='gallery'>
<li style='position:relative!important;'>
<div class='gallery_img'><img alt='Google' src='https://lh4.googleusercontent.com/-Nh50j1-Bqws/UyV9Pv_wd3I/AAAAAAAAMf8/nsYUnwm35Gs/s1920/slide_1.jpg' title='Google'/></div>
<div class='gallery_text'><h2>Google</h2><p>Google is an American multinational corporation specializing in Internet-related services and products.</p><a href='http://www.google.com'>Open Google</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Bing' src='https://lh4.googleusercontent.com/-eGrPYj9dz1c/UyV9QgDIh5I/AAAAAAAAMgM/mlcDdyufQJs/s1920/slide_2.jpg' title='Bing'/></div>
<div class='gallery_text'><h2>Bing</h2><p>Bing is a search engine that brings together the best of search and people in your social networks to help you spend less time searching and more time doing.</p><a href='http://www.bing.com'>Open Bing</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Yahoo' src='https://lh6.googleusercontent.com/-L_s8vxgupPY/UyV9RKToZeI/AAAAAAAAMgQ/TWs-wy7lbrk/s1920/slide_3.jpg' title='Yahoo'/></div>
<div class='gallery_text'><h2>Yahoo</h2><p>Yahoo! Inc. is an American multinational Internet corporation headquartered in Sunnyvale, California.</p><a href='http://www.yahoo.com'>Open Yahoo</a></div>
</li>
</ul>
</div>
<div class='clear'/>
This Is The DIV Or Text After The Slider.

您还可以看到实时FIDDLE错误...

Answer 1

我想我已经找到问题了。您试图动态调整display元素的CSS <li>属性，在block和none之间交替。但是我认为这不是正确的方法。所有列表项元素都应显示并始终带有display:block;。可以通过将第一个<li>设置为position:static;（这意味着它将被嵌入到页面的图形流中）来实现所需的定位，并将所有剩余的<li>元素都设置为position:absolute;（这意味着它们将在位置上“折叠”到其父容器，从而使它们紧贴地坐在第一个<li>的顶部）。为了确保始终只有一个<li>可见，足以将其他<li>的不透明度降低到零。

因此，我对您的代码进行了以下更改：


将第一个<li style='position:relative!important;'>从<li style="position:static;">更改为display。
将#gallery li规则的block属性更改为<li>。
注释掉3条JS行，其中您混淆了setOpacity()节点的.style.display属性。
将so_xfade()函数的定义移出了window.setOpacity函数，以便将其存储在for(i=0;i<imgs.length;i++) setOpacity(imgs[i]);中，因此可以从所有作用域访问它（对于更改＃5，这是必需的）。
在so_init()行之后，在imgs[0].xOpacity = .99;中添加了<li>行，以确保正确初始化所有imgs[i].style.zIndex = ZINDEX_UNDERNEATH;元素的不透明度。


我以前没有使用过jsfiddle，所以不确定我是否正确使用了此方法，但是我单击了顶部菜单栏中的“更新”按钮，然后将我放到了http://jsfiddle.net/yyathnom/2/中，所以我认为您可以使用它来看看我的变化。让我知道它是否按您想要的方式工作。

编辑：抱歉，我没有意识到每张幻灯片都需要链接功能。对于链接功能，当前幻灯片不仅需要可见，而且还应该位于堆栈的最前面。这可以通过z-index完成。

麻烦的是，z-index不适用于静态定位的元素，但是可以通过将第一个列表项的position：static属性更改为position：relative来轻松克服（实际上是您原来拥有的！）。相对定位的元素仍在流动中，只需移动它们并设置其z索引即可。

另一个复杂之处是z-index与不透明度发生奇怪的相互作用；最终的“计算”不透明度似乎同时考虑了CSS样式和z-index的不透明度。因此，如果您交换两个图像的Z索引，则将不透明度为50％的图像放置在另一个图像为50％的图像上，将导致外观有所不同，即使两个不透明度都保持为50％。我最初尝试在两个图像的混浊度大约相等（50％）时交换z索引，但是视觉上的抖动是不可取的，因此我最终只在最后更改了z索引，不透明度为零。

因此，进行了以下附加更改：


添加了两个全局概念常数ZINDEX_UNDERNEATH（1）和ZINDEX_CURRENTSLIDE（100）。在堆叠上下文中，较大的z索引表示“更多在前面”，较小的表示“更向后”。
为除第一个<li>以外的所有内容添加了初始化imgs[0].style.zIndex = ZINDEX_CURRENTSLIDE;，并为第一个<li>添加了current。
在重新分配<li>之前，添加了以下两行将新的当前幻灯片设置为可见的z-index：

imgs[current].style.zIndex = ZINDEX_UNDERNEATH;
imgs[nIndex].style.zIndex = ZINDEX_CURRENTSLIDE;

结果：http://jsfiddle.net/yyathnom/3/

编辑：为了提供有关原始问题的更多详细信息，这是由于以下事实造成的：3个position:absolute元素中的2个具有<li>，这意味着它们没有流入，尽管第一个position:relative具有，这意味着它是流入的（但相对可移动），代码经常使用display:none禁用它。任何不流入的元素实际上都不会有“质量”，这意味着它不会将以下元素推到下面，而是让它们“塌缩”到如果已经流入的位置。流。因此，当第一个<li>设置为display:none时（这是显示其他2个<li>的时间），那里没有流入元素可将幻灯片图像之后的文本保持在图像下方，因此折叠到了图像的流动位置。