2013-04-10 185 views
1

我需要構建一個圖像滑塊。樓下有一個圖像滑塊的例子,但它不工作的屬性。當我按左鍵滑塊工作正常,但當我點擊右鍵時,它超出了範圍。jquery單圖像滑塊

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/

感謝

回答

1

3事情,我看到的都是錯誤的,都在其他塊在線21

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

1)您在這裏需要一個邏輯運算符 '< />/==' 不是 '+'

2)當您動畫權

3 leftOfImg可變正變得越來越小)有在else塊中沒有返回語句,即使它啓動了,所以它只會保持動畫效果

+0

我不能這樣做:( – 2013-04-10 17:09:40