jQuery的滑塊幫助

Question

行，所以我有一個interspire購物車因此它很難定製..

反正

這裏是我的代碼的鏈接 http://jsfiddle.net/WTvQX/

遇到問題即時得到滾動正常工作......

它的工作方式不同在我這裏的實際網站...

，所以我需要幫助... [R E-做或剛剛殺青..

讓我硝酸鉀

Answer 1

您需要將「relatedLeft」 ID添加到左邊的按鈕，但嘗試這樣的事情......

演示：http://jsfiddle.net/wdm954/WTvQX/3/

$('#relatedRight').click(function() { 
    $('#scool').animate({left: "+=100px"}, 'slow'); 
}); 
$('#relatedLeft').click(function() { 
    $('#scool').animate({left: "-=100px"}, 'slow'); 
}); 

您可以根據自己的喜好調整像素距離和速度。

---

編輯：嘗試這樣的事情。第一部分找到所有圖像的寬度。然後動畫僅在偏移量在範圍內時觸發。

演示：http://jsfiddle.net/wdm954/WTvQX/5/

var w = 0; 
$('#scroll img').each(function (i, val) { 
    w += $(this).width(); 
}); 

$('#relatedRight').click(function() { 
    var offset = $('#scroll').offset(); 
    if (offset.left < w) { 
     $('#scroll').animate({left: "+=100px"}, 'slow'); 
    } 
}); 
$('#relatedLeft').click(function() { 
    var offset = $('#scroll').offset(); 
    if (offset.left > -w) { 
     $('#scroll').animate({left: "-=100px"}, 'slow'); 
    } 
}); 

---

編輯：還有一個代碼在這裏選擇。這個將停止滾動更快（注意這裏也有CSS更改）。

演示：http://jsfiddle.net/wdm954/WTvQX/7/

var w = 0; 
$('#scroll img').each(function (i, val) { 
    w += $(this).width(); 
    w += parseFloat($(this).css('paddingRight')); 
    w += parseFloat($(this).css('paddingLeft')); 
    w += parseFloat($(this).css('marginRight')); 
    w += parseFloat($(this).css('marginLeft')); 
}); 

$('#scroll').css('width', w + 'px'); 

$('#relatedRight').click(function() { 
    var offset = $('#scroll').offset(); 
    if (offset.left < 0) { 
     $('#scroll').stop().animate({left: "+=100px"}, 'slow'); 
    } 
}); 
$('#relatedLeft').click(function() { 
    var offset = $('#scroll').offset(); 
    var b = $('#bar').width(); 
    if (offset.left > b-w) { 
     $('#scroll').stop().animate({left: "-=100px"}, 'slow'); 
    } 
});