<!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>無(wú)標(biāo)題文檔</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)
????????????????????}????
????
????//開(kāi)始執(zhí)行
????timer=setInterval(autoPlay,5000);
????
????????//圖片自動(dòng)播放函數(shù)
????????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;?//步長(zhǎng)
????
????????????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>明明設(shè)置了絕對(duì)定位 以#main為父級(jí)定位 為什么動(dòng)畫(huà)走起來(lái)的時(shí)候 <p>卻跟著第一張圖片走了? 我不了解是跟著#wrap走了 還是第一張圖片? 我的解決方法是每執(zhí)行一次就把<p>的left值增加300px? 但是我不明白問(wèn)題出在哪里了~~
關(guān)于《p》的問(wèn)題
qq_已是回憶為何要苦苦追尋_03352366
2017-01-14 02:14:34
