关于《p》的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p,body { margin:0; padding:0;}
#madin { width:300px; height:300px; overflow:hidden; position:relative;}
p { width:300px; height:30px; line-height:30px; text-align:center; background:#666; opacity:0.6; position:absolute; left:0; bottom:-30px; color:#fff; z-index:1000;}
#wrap { width:1200px; height:300px; position:absolute; left:0; top:0;}
img { width:300px; height:300px; float:left;  z-index:1;}
</style>
</head>

<body>
<div id="madin">
    <div id="wrap">
        <p></p>
        <img src="img/t1.jpg" />
        <img src="img/t2.jpg" />
        <img src="img/t3.jpg" />
        <img src="img/t4.jpg" />
    </div>
</div>
<script>
    var oWrap=document.getElementById("wrap");
    var aImg=oWrap.getElementsByTagName("img");
    var oP=oWrap.getElementsByTagName("p")[0];
    
    var arrText=["这是第一张图片","这是第二张图片","这是第三张图片","这是第四张图片"];
    var timer=null;
    var num=0;
    paraChange();
    function paraChange() {
    setTimeout (function () {
                    doMove(oP,10,0,"bottom");
                    oP.innerHTML=arrText[num]
                    num++;
                    if (num==arrText.length) {
                        num=0;
                        }
                    
                    setTimeout(function() {
                        doMove(oP,50,-30,"bottom");
                        console.log(0);
                        },2000)
                        },2000)
                    }    
    
    //开始执行
    timer=setInterval(autoPlay,5000);
    
        //图片自动播放函数
        function autoPlay() {    
                var getLeft=parseInt(getStyle(oWrap,"left"));
                var getWidth=parseInt(getStyle(aImg[0],"width"));
                var getOp=parseInt(getStyle(oP,"bottom"));
                timer=setInterval(function () {
                var speed=getLeft-20;
                if (speed%getWidth==0) {
                    clearInterval(timer)
                    paraChange();
                    }
                if (speed<-900) {
                    speed=300;
                    }
                getLeft=speed;
                oWrap.style.left=getLeft+"px";
                oP.style.left=300*num+"px";
                    },50);
                    
            }
        
        
            
        
function getStyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj)[attr];}        
function doMove(obj,dir,target,attr) {
        dir=parseInt(getStyle(obj,attr))<target ? dir : -dir;    
        clearInterval(obj.timer);
        obj.timer=setInterval(function () {
        var speed=parseInt(getStyle(obj,attr))+dir; //步长
    
            if (speed>target && dir>0 || speed<target && dir<0) {
            speed=target;
            }
        obj.style[attr]=speed+"px";
        if (speed==target) {
                clearInterval(obj.timer);
                }
        },20);    
        }
</script>
</body>
</html>

我的<p>明明设置了绝对定位以#main为父级定位为什么动画走起来的时候 <p>却跟着第一张图片走了我不了解是跟着#wrap走了还是第一张图片我的解决方法是每执行一次就把<p>的left值增加300px 但是我不明白问题出在哪里了~~

qq_已是回忆为何要苦苦追寻_03352366

浏览 1345回答 3

3回答

破晓Daybreak

其实很简单，你对设置了position:absolute;属性的节点元素的定位参考点没有深入理解；现在好多教学视频都是简单表面的教一些初学者说设置了absolute属性就在父级元素设个relative，让其相对于这个relative的父级定位，从而会误导好多初学者认为absolute的子元素就是根据relative父元素定位。其实这是不全面的！其实：设置了absolute的子元素其实是根据设置了定位属性（relative，absolute，fixed）的父级元素定位的。所以你问题中的p父级#wrap设置了position：absolute，p就根据#wrap定位了。解决办法：把p扔到#wrap外面，写在#wrap后面。

0 0

随时随地看视频慕课网APP