无法实现轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6-2项目作业</title>
<link href="6-2style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main" id="abc">
<div class="nav"></div>
<div class="pics" id="pics">
<div class="pic active">
<a href="#">
<img src="img/1.jpg"/>
</a>
</div>
<div class="pic ">
<a href="#">
<img src="img/3.jpg"/>
</a>
</div>
<div class="pic">
<a href="#">
<img src="img/4.jpg"/>
</a>
</div>
<div class="pic">
<a href="#">
<img src="img/5.jpg"/>
</a>
</div>
</div>
</div>
<script src="6-2script.js"></script>
</body>
</html>

我的想法是：利用给不同的div添加active这个class，来实现让正确的图片出现block从而达到显示的目的，但为什么不行呢，我到底是出了什么问题，看了好多遍老师的例题还是无法理解。。。。。

慕丝6937110 2018-09-13

源自：项目：JS实现轮播特效 3-4 图片自动轮播

收起

4回答

妮可妮可妮_ 2018-09-13 15:34:07

收起回答

妮可妮可妮_ 2018-09-13 11:42:30

z-index是控制层级的大小,类似将几个笔记本摞放在一起,在上面看,只能看到最上面的一本,而display:none视为不存在且不加载，就是不为被隐藏的对象保留其物理空间，该对象在页面上彻底消失,要从根本上理解每一个属性的作用,图片轮播是因为同学设置了onclick点击事件,当点击时才会触发事件,

祝学习愉快!

收起回答

提问者慕丝6937110 #1

不不不，老师，我不是这个意思，我故意设成点击事件的，但不知为什么，我所设立的条件句就是无法实现出理想的轮播效果，第一轮图片播放实现后，第二轮以及之后的持续播放就是做不出来，我实在不知道我究竟错哪里，我的思路是：把active这个class不停地按顺序添加到每张图片上，然后再都把这个class名删除，在从头添加以达到该出现的图片能被block

2018-09-13 11:57:01
提问者慕丝6937110 #2

不好意思，关于z-index我还是不明白，我这边每张图片都把position设置了absolute，按理说他们应该在同一位置上重叠了才对，当我把其中我想要的那张图片的z-index值设成一个高数值（例如9999px）这时这张图应该显示出来才对呀，可代码中却做不到这种想法，是我理解错了吗

2018-09-13 13:04:31

提问者慕丝6937110 2018-09-13 10:45:13

//封装一个函数来获取dom元素
function getId(idName){
    return document.getElementById(idName);
}
//一些全局变量
//var main=document.getElementById("main")
var abc=getId("abc");
var pics=getId("pics").getElementsByTagName("div");
var len=pics.length;
var index=0;
var picsAuto;
 
//实习图片每隔2秒轮播
abc.onclick=function(){
    picsAuto=setInterval(
        function(){
            index++;
            pics[index].className="pic active";
             
            if(index==len){
                for(var i=0; i<len; i++){
                    pics[i].className="pic";
                     
                }
                index=-1;
            }
        },2000);
}

这是我的js代码

收起回答

提问者慕丝6937110 2018-09-13 10:44:32

{
    margin:0px;
    padding:0px;
}
 
.main{
    border:2px solid blue;
   /*使整个盒子水平居中显示*/
    height:510px;
    width:1200px;
    position:absolute;
    left:0px; right:0px; top:0px; bottom:0px; margin:auto;
}
 
.nav{
    height:50px;
    width:1200px;
    border:1px solid black;
}
 
.pic{
    position: absolute;
    display:none;
}
.active{display:block;}/*因为先在pic里写了none，然后再在
                active里写了block，根据class优先级所以有效*/
/*为什么只能用display才有效，
                    我想设置z-index来让优先级大的图片
                    显示出却不行？？*/