为什么没效果
<!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" />
<!--滑动按钮设置-->
<input type="button" id="btn" value="右移" style="position:absolute;left:10px;top:275px">
</div>
<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 endLeft=img.offsetLeft+300;
var slideTimer = setInterval(function()
{
//现在距离左边的距离
if(imgLeft < endLeft)
{
if(imgLeft < maxLeft)
{
//将图片的左偏移（left值）增加20px，注意单位
img.style.left=imgLeft+20+'px';
}
else
{
alert("最大右移量");
clearInterval(slideTimer);
//终止定时器函数
}
}
else
{
clearInterval(slideTimer);
}
},10);
}
}
</script>
</body>
</html>
