這段代碼可以的,但是一滑倒最右端后就不停地跳出alert里的,叉不掉,在DW里和IE里都是。是哪里有問題???
<!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>無標(biāo)題文檔</title>
</head>
<body>
<!--頁面布局-->
? ? <!--圖片相關(guān)屬性設(shè)置-->
? ??
<img style="position:absolute;left:0;top:0" src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg" id="myImage" ?/>
<!--滑動按鈕設(shè)置-->
<input type="button" id="btn" value="點擊滑動" ?style="margin-top:300px" />
</div>
<script>
window.onload = function(){
var img = document.getElementById("myImage");
var btn = document.getElementById("btn");
//綁定點擊事件
btn.onclick = function(){
imgSlide(); //點擊按鈕時執(zhí)行滑動函數(shù)
}
var maxLeft = 700;//向右滑動的極限值
//實現(xiàn)滑動函數(shù)
function imgSlide(){
var endLeft = parseInt(img.style.left)+300; //每次點擊后向右滑動300px
var slideTimer = setInterval(function(){
? ? ? var imgLeft=parseInt(img.style.left); ? ? ? ?//現(xiàn)在距離左邊的距離
if(imgLeft < endLeft){
if(imgLeft < maxLeft){
img.style.left=(imgLeft+20)+"px"; //將圖片的左偏移(left值)增加20px,注意單位
}else{
alert("已經(jīng)滑倒極限了");
? ? ? ? ? ? ? ? ? ? clearInterval(sliderTimer);
//終止定時器函數(shù)
}
}else{
clearInterval(slideTimer);
}
},10);
}
}
</script>
</body>
</html>
2015-11-22
親,你的清除定時器那段代碼定時器名字寫錯了哦,