<!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>
</head>
<body>
<!--頁面布局-->
????<!--圖片相關屬性設置-->
????
<img?style="position:absolute;left:0;top:0"?src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg"?id="myImage"??style="position:absolute;left:0;top:0"/>
<!--滑動按鈕設置-->
<input?type="button"?value="開始動畫"?id="btn"
style="margin-top:400px"/>
<script>
window.onload?=?function(){
var?img?=?document.getElementById("myImage");
var?btn?=?document.getElementById("btn");
//綁定點擊事件
btn.onclick?=?function(){
imgSlide(); //點擊按鈕時執行滑動函數
}
var?maxLeft?=?700;//向右滑動的極限值
//實現滑動函數
function?imgSlide(){
????????????????????????????????????????//每次點擊后向右滑動300px
var?slideTimer?=?setInterval(function(){
?????var?imgLeft=img.style.left;
?????????????var?endLeft=img.style.left+100;
?????????????//現在距離左邊的距離
if(imgLeft?<?endLeft){
if(imgLeft?<?maxLeft){
//將圖片的左偏移(left值)增加20px,注意單位
????????????????????????img.style.left=img.style.left+20+"px";
}else{
//終止定時器函數
alert("已經到了最右邊了!");
clearInterval(slideTimer);
}
}else{
clearInterval(slideTimer);
}
},10);
}
}
</script>
</body>
</html>
2016-12-28
已經找到了問題所在