<!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 但是我不明白问题出在哪里了~~
3 回答
已采纳
破晓Daybreak
TA贡献5条经验 获得超4个赞
其实很简单，你对设置了position:absolute;属性的节点元素的定位参考点没有深入理解；现在好多教学视频都是简单表面的教一些初学者说设置了absolute属性就在父级元素设个relative，让其相对于这个relative的父级定位，从而会误导好多初学者认为absolute的子元素就是根据relative父元素定位。
其实这是不全面的！其实：设置了absolute的子元素其实是根据设置了定位属性（relative，absolute，fixed）的父级元素定位的。
所以你问题中的p父级#wrap设置了position：absolute，p就根据#wrap定位了。解决办法：把p扔到#wrap外面，写在#wrap后面。
添加回答
举报
0/150
提交
取消