Question

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

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/

谢谢

Answer 1

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

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

1）你需要一个逻辑运算符'＆lt; /＆gt; / =='不是'+'

2）当您设置右侧

时，leftOfImg变量会变小

3）在else块中没有return语句，即使它已经触发，所以它只会保持动画

jquery单图像滑块

1 个答案: