在jquery中爲.animate設置邊界

我在jquery中有一個基本的滑塊，由一個left_arrow和right_arrow div組成，它們都控制包含一個長.png的我的#screens div的'left'值。每個屏幕寬度爲543px。在jquery中爲.animate設置邊界

$pr('#arrow_left').click(function() { 
    $pr('#screens').animate ({"left": "+=543px"}, "fast"); 
}); 
$pr('#arrow_right').click(function() { 
    $pr('#screens').animate ({"left": "-=543px"}, "fast"); 
});

的滑動操作工作正常，但我想爲#screens「左」值設爲最小值和最大值，因此箭不會採取超越用戶在任何方向上的圖像。

來源

2011-11-18 user1054409

是屏幕div包含在一個固定的寬度div與溢出：隱藏？ – dSquared

var max = 543 * 10; //10 slides, for example 
var current = 0; 
$pr('#arrow_left').click(function() { 
    if(current < 0) 
    { 
     current += 543; 
     $pr('#screens').animate ({"left": current + "px"}, "fast"); }); 

    } 
}); 

$pr('#arrow_right').click(function() { 
    if(current > max) 
    { 
     current -= 543; 
     $pr('#screens').animate ({"left": current + "px"}, "fast"); 

    } 
});

來源

2011-11-18 20:24:34

此解決方案還解決了每次單擊左鍵時綁定新的「右鍵」單擊事件的問題，這會導致一些意外行爲。 – Dave

var max應該表示總幻燈片，如果將其寫入dom，則可以通過jQuery輕鬆收集這些幻燈片。 –

凱清的回答是真棒:)我做了它的變化對自己的需要，並增加了jQuery的的最大變量，它會改變基於滑塊多少直接孩子<div>的都有，所以你從來沒有編輯它一旦它的設置:)

我就離開的代碼片段在這裏櫃面有人需要它：對

$(document).ready(function(){ 
var max = 275 * $('.slider-wrap > div').length; //change div to whatever element wraps each individual piece of content you're sliding. 
var current = 0; 
$('.left').click(function() { 
if(current < max){ 
    alert(current); 
    current += 275; 
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    } 
}); 
$('.right').click(function() { 
if(current > 0){ 
    alert(current); 
    current -= 275; 
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    } 
});

}）;

來源

2015-05-20 08:08:17

在jquery中爲.animate設置邊界

回答

相關問題