將開始和結束參數設置爲JavaScript幻燈片

Question

我不是JavaScript專家，所以如果這不是最好的方法，那很可能是爲什麼。我已經建立了使用這些JavaScript功能的功能幻燈片：

<script type="text/javascript"> 
    function shiftLeft() { 
     var val = (parseInt(document.getElementById('slides').style.left, 10) || 0) + 560; 
     document.getElementById('slides').style.left = val + 'px'; 
    } 
    function shiftRight() { 
     var val = (parseInt(document.getElementById('slides').style.left, 10) || 0) - 560; 
     document.getElementById('slides').style.left = val + 'px'; 
    } 
</script> 

基本上，這種移動圖像560個像素的一種方式或其他取決於如果向左或向右按​​鈕被點擊。在這一點上一切都按預期工作，但是我期待添加參數以防止幻燈片滑動超過0px（即在正整數上）並且不超過-3360像素。任何有關如何設置這些參數的建議？任何見解都非常感謝。

Answer 1

之前設置val，首先要檢查它，看它是否超出了極限：

<script type="text/javascript"> 
    var leftBound = 0, 
     rightBound = -3360; 
    function shiftLeft() { 
    var val = (parseInt(document.getElementById('slides').style.left, 10) || 0) + 560; 
    val = val > leftBound ? leftBound : val; 
    document.getElementById('slides').style.left = val + 'px'; 
    } 
    function shiftRight() { 
    var val = (parseInt(document.getElementById('slides').style.left, 10) || 0) - 560; 
    val = val < rightBound ? rightBound : val; 
    document.getElementById('slides').style.left = val + 'px'; 
    } 
</script> 

我還送fiddle。

Answer 2

<script type="text/javascript"> 
function shiftLeft(min, max) { 
    var val = (parseInt(document.getElementById('slides').style.left, 10) || 0) + 560; 
    if (val<min) {val=min;} else if (val > max) {val=max;} 
    document.getElementById('slides').style.left = val + 'px'; 
} 
function shiftRight (min, max) { 
    var val = (parseInt(document.getElementById('slides').style.left, 10) || 0) - 560; 
    if (val<min) {val=min;} else if (val > max) {val=max;} 
    document.getElementById('slides').style.left = val + 'px'; 
}