<!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="./mynameyy.jpg" id="myImage" />
<!--滑动按钮设置-->
<input type ="button" id="btnright" value="向右滑动" style="margin-top:250px;"/>
<input type ="button" id="btnleft" value="向左滑动" style="margin-top:250px;"/>
</div>
<script>
window.onload = function(){
var img = document.getElementById("myImage");
var btnright = document.getElementById("btnright");
var btnleft=document.getElementById("btnleft");
//绑定点击右移事件
btnright.onclick = function(){
imgSlideRight(); //点击按钮时执行滑动函数
}
//绑定点击左移事件
btnleft.onclick=function(){
imgSlideLeft(); //点击按钮时执行滑动函数
}
var maxLeft = 700;//向右滑动的极限值
//var maxRight= 800;//向左划
//实现滑动函数
//得到网页的宽度
var bodyWidth=document.body.clientWidth;
//得到图片的宽度
var imgWidth=parseInt(img.width);
alert(endRight);
function imgSlideRight(){
var endLeft=img.offsetLeft + 200;
var slideTimer = setInterval(function(){
var imgLeft=img.offsetLeft; //现在距离左边的距离
//得到图片现在距离右边的距离
var imgRight=parseInt(bodyWidth-endLeft-imgWidth);
//alert(imgRight);
if(imgLeft < endLeft){
if(imgRight>0){
//将图片的左偏移(left值)增加20px,注意单位
img.style.left=imgLeft+20+'px';
}else{
alert("已经到了最大值,不能在移动了");
//终止定时器函数
clearInterval(slideTimer);
}
}else{
clearInterval(slideTimer);
}
},20);
}
function imgSlideLeft(){
//每一次左移多少
//var imgRight=parseInt(bodyWidth-endLeft-imgWidth);
var imgLeft=img.offsetLeft;
var endLeft=img.offsetLeft-200;
//alert(endLeft);
var slideTimer=setInterval(function(){
img.style.left=parseInt((imgLeft-200))+'px'
},20);
}
}
</script>
</body>
</html>