自己写的焦点图代码问题

Question

自己练习做的一个焦点图//焦点图
var timer=null;
function focusTab(nTarget){
window.clearTimeout(timer);
var oDiv=document.getElementById('idFocusImg');
//var goDiv=Math.ceil(Math.abs((nTarget-oDiv.offsetLeft)/10));
if(oDiv.offsetLeft>nTarget){
//oDiv.style.left=oDiv.offsetLeft-goDiv+'px';
oDiv.style.left=oDiv.offsetLeft-20+'px';
timer=window.setTimeout(function(){focusTab(nTarget)},30);
if(oDiv.offsetLeft<=nTarget){
window.clearTimeout(timer);
}
}else{
//oDiv.style.left=oDiv.offsetLeft+goDiv+'px';
oDiv.style.left=oDiv.offsetLeft+20+'px';
timer=window.setTimeout(function(){focusTab(nTarget)},30);
if(oDiv.offsetLeft>=nTarget){
window.clearTimeout(timer);
}
}
}
function focusLeft(){
var oDiv=document.getElementById('idFocusImg');
if(oDiv.offsetLeft==-2784){
oDiv.style.left=0+'px';
}
nTarget=Math.ceil((oDiv.offsetLeft)/928)*928-928;
focusTab(nTarget);
}
function focusReight(){
var oDiv=document.getElementById('idFocusImg');
if(oDiv.offsetLeft==0){
oDiv.style.left=-2784+'px';
}
nTarget=Math.ceil((oDiv.offsetLeft)/928)*928-928;
focusTab(nTarget);
}
/*
//焦点图自动轮播
var nCount=0;
function focusMove(){
if(document.getElementById('idFocusImg').offsetLeft==-2784){
document.getElementById('idFocusImg').style.left=0;
}
focusTab(nCount*-928);
nCount++;
if(nCount==4){
nCount=0;
}
window.setTimeout(focusMove,3000);
}
*/
window.onload=focusMove;
/*焦点图*/
#idFocus{width:928px; height:408px; position:relative; overflow:hidden}
#idFocusImg{width:3712px; position:absolute; left:0; top:0}
#idFocusImg img{float:left}
#idFocus .FocusButton{width:27px; height:27px; background:url(../images/idFocusButton.png) no-repeat; cursor:pointer; z-index:5; position:absolute; top:196px}
#idFocus .FocusLeft{left:10px; background-position:0 0}
#idFocus .FocusRight{right:10px; background-position:-27px 0}
<div id="idFocus">
<div class="FocusButton FocusLeft" onclick="focusLeft()"></div>
<div id="idFocusImg">
     <div><img src="temp/focus_01.jpg" width="928" height="408" /></div>
        <div><img src="temp/focus_02.jpg" width="928" height="408" /></div>
        <div><img src="temp/focus_03.jpg" width="928" height="408" /></div>
        <div><img src="temp/focus_01.jpg" width="928" height="408" /></div>
    </div>
    <div class="FocusButton FocusRight" onclick="focusReight()"></div>
</div>有几点疑问：
1：为什么当我点击onclick="focusReight()"右侧按钮的时候代码不管用？而左侧按钮就管用
2：我为了防止动画运动过界，固设定了
if(oDiv.offsetLeft<=nTarget){
   window.clearTimeout(timer);
}为什么动画还是会运动过界？

Answer 1

第一个问题，你左右键处理都一样？
nTarget=Math.ceil((oDiv.offsetLeft)/928)*928-928;  
往右改成“+”好试试
nTarget=Math.ceil((oDiv.offsetLeft)/928)*928+928; 

Answer 2

修改了一下代码
    <script type="text/javascript">        //焦点图
        var timer = null;
        function focusTab(nTarget) {
            window.clearTimeout(timer);
            var oDiv = document.getElementById('idFocusImg');
            //var goDiv=Math.ceil(Math.abs((nTarget-oDiv.offsetLeft)/10));
            if (oDiv.offsetLeft > nTarget) {
                //oDiv.style.left=oDiv.offsetLeft-goDiv+'px';
                oDiv.style.left = oDiv.offsetLeft - 20 + 'px';
                timer = window.setTimeout(function () { focusTab(nTarget) }, 30);
                if (oDiv.offsetLeft <= nTarget) {
                    window.clearTimeout(timer);
                }
            } else {
                //oDiv.style.left=oDiv.offsetLeft+goDiv+'px';
                oDiv.style.left = oDiv.offsetLeft + 20 + 'px';
                timer = window.setTimeout(function () { focusTab(nTarget) }, 30);
                if (oDiv.offsetLeft >= nTarget-928) {
                    window.clearTimeout(timer);
                }
            }
        }
        function focusLeft() {
            var oDiv = document.getElementById('idFocusImg');
          
            if (oDiv.offsetLeft <= -2784+928) {
                oDiv.style.left = 928 + 'px';
            }
            nTarget = Math.ceil((oDiv.offsetLeft) / 928) * 928 - 928;
            focusTab(nTarget);
        }
        function focusReight() {
            var oDiv = document.getElementById('idFocusImg');
            if (oDiv.offsetLeft >= 0) {
                oDiv.style.left = -2784+928 + 'px';
            }
            nTarget = Math.ceil((oDiv.offsetLeft) / 928) * 928 + 928;
            focusTab(nTarget);
        }
        
//        //焦点图自动轮播
//        var nCount=0;
//        function focusMove(){
//        if(document.getElementById('idFocusImg').offsetLeft==-2784){
//        document.getElementById('idFocusImg').style.left=0;
//        }
//        focusTab(nCount*-928);
//        nCount++;
//        if(nCount==4){
//        nCount=0;
//        }
//        window.setTimeout(focusMove,3000);
//        }
//        
//        window.onload = focusMove;    
    </script>第四张图片
 <div><img src="temp/focus_01.jpg" width="928" height="408" /></div>
去掉,宽度才是2784
代码还是有很多不足之处的