1

我需要构建一个图像滑块。楼下有一个图像滑块示例，但它不是工作属性。当我按下左键时，滑块工作正常，但是当我单击右键时，它超出了范围。

HTML：

<div class="slider">
    <img src="http://lh5.googleusercontent.com/-k__maLyJIPw/UWV1-WyW9rI/AAAAAAAAAJk/MVfNsKPQLsU/s1539/slider.png" alt="" />
    <a href="" class="left">left</a>
    <a href="" class="right">right</a>
</div>

JAVASCRIPT：

$(document).ready(function() {
    var SELIDER_OFFSET_LEFT = $(".slider").offset().left;
    $(".slider .left,.slider .right").click(function(){
        var lambda = -1;
        var isLeft = false;   
        var animateWidth = 100;
        var isFirst = true;
        if($(this).hasClass('left')){
            lambda = 1;
            isLeft = true;
        }

        var leftOfImg =   $(".slider img").offset().left;
        console.log(leftOfImg); 
         console.log('*');
        console.log(SELIDER_OFFSET_LEFT);

       var leftTTT = (isFirst)?SELIDER_OFFSET_LEFT - animateWidth:SELIDER_OFFSET_LEFT;
        if(leftOfImg  >= leftTTT &&  isLeft){
             return false;
        }else if(leftOfImg + $(".slider img").width() && !isLeft){

        }   

        var isFirst = false;

        $(".slider img").stop().animate({
            marginLeft: '-='+-animateWidth*lambda
        },1000);
        return false;
    });

});

这是一个演示：http: //jsfiddle.net/5AdTe/1/

谢谢

4

1 回答 1

1

我能看到的 3 件事是错误的，都在第 21 行的 else 块中

else if(leftOfImg + $(".slider img").width() && !isLeft)

1）这里需要一个逻辑运算符'< / > / =='而不是'+'

2）当你向右动画时，leftOfImg 变量变得越来越小

3) else 块中没有 return 语句，即使它确实触发了，所以它只会继续动画

于 2013-04-10T15:42:41.550 回答