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/
感謝
我不能這樣做:( – 2013-04-10 17:09:40