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>元素都应设置为{ {1}}（意味着他们会在位置上＆＃34;崩溃＆＃34;直到他们的父容器，从而导致他们紧紧地坐在第一个position:absolute;之上。为了确保始终只能看到一个<li>，它足以将其他人的不透明度降低到零。

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

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

我之前没有使用过jsfiddle，所以我不确定我是否做得对，但我点击了＆＃34;更新＆＃34;顶部菜单栏中的按钮将我放入http://jsfiddle.net/yyathnom/2/，所以我认为您可以使用它来查看我的更改。如果它按照你想要的方式工作，请告诉我。

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

一个复杂因素是z-index不适用于静态定位的元素，但是通过将position：static属性更改为position：relative为第一个列表项（实际上就是你原来的那个），可以很容易地解决这个问题。）。相对定位的元素仍然在流动中，它们可以被移动并设置其z-index。

另一个复杂因素是z-index与不透明度奇怪地相互作用;决赛＆＃34;计算＆＃34;不透明度似乎同时考虑了不透明度CSS样式和z-index。因此，如果您交换两个图像的z索引，即使两个不透明度都保持在50％，在50％的另一个图像上具有50％不透明度的图像将导致不同的外观。我最初试图在两个图像大致相等（50％）的不透明度时交换z索引，但是视觉混蛋是不可取的，所以我最后只是在不透明度为零时改变了z-index。

因此，进行了以下额外更改：

添加了两个全局概念常量，ZINDEX_UNDERNEATH（1）和ZINDEX_CURRENTSLIDE（100）。更大的z指数意味着＆＃34;更多的前面＆＃34;更小的意思是＆＃34;进一步回到＆＃34;在堆叠环境中。
为除第一个<li>之外的所有人添加了初始化imgs[i].style.zIndex = ZINDEX_UNDERNEATH;，为第一个<li>添加了imgs[0].style.zIndex = ZINDEX_CURRENTSLIDE;。
在重新分配<li>之前，添加了以下两行来将新的当前幻灯片设置为可见的z-index：
```
current
```

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

修改：要提供有关原始问题的更多详细信息，原因是3个imgs[current].style.zIndex = ZINDEX_UNDERNEATH; imgs[nIndex].style.zIndex = ZINDEX_CURRENTSLIDE;元素中有2个元素<li>，这意味着它们不是in-flow，虽然第一个position:absolute有<li>，意味着 in-flow（但相对可移动），代码会定期禁用{{1} }。任何不流入的元素实际上都没有＆＃34; mass＆＃34;，这意味着它不会推动它下面的元素，但是会让它们崩溃并且＃34;如果它已经流入，它将定位的位置。因此，当第一个position:relative被设置为display:none时（显示其他2个<li>时），那里没有流入元素来保持文本跟随幻灯片显示图像下方的图像，因此它会折叠到图像的流动位置。

滑块覆盖滑块后的内容。为什么？

1 个答案: