在jQuery中执行水平滚动窗格的最佳方法是什么？

我想出了下面的解决办法。这很有效，但我很想知道是否有更有效的方法。谢谢

HTML:

所以基本上，魔法窗格是一个300像素宽的小视口。里面是一个两倍宽的滚动条，包含两个并排的div。非常简单，不过我还是想知道是否有更有效的方法来编码

---

当数量最小时，您无需担心任何事情。就像你的情况一样，2是很容易管理的。注意：您正在为所有窗格编写单独的onClick函数，这将产生问题

但是随着数量的增长，比如说50，那么您将不得不编写不同的$'pane1-clicker'onClick函数$pane50 clicker，效率极低。您应该修改脚本，以支持任意数量的窗格，而无需编写额外的代码

另外，扩展该函数，使其可以用作插件。 如果插件能够匹配一个特定的选择器并分配相关的位置，比如left:300px，那就更好了

---

从您当前的代码中，我可能会立即更改的唯一一件事是将$scroller'从两个click处理程序中取出，作为一个闭包。这样，处理程序就不必在每次单击时都选择它

var $scroller = $('#scroller');
$('#pane1-clicker').click(function() {
    $scroller.animate({ left: '-300px' }, 500);
});
$('#pane2-clicker').click(function() {
    $scroller.animate({ left: '0' }, 500);
});

---

我认为滑动比滚动更合适。它是完美的…你可以用外部CSS而不是内联CSS来优化它

$(document).ready(function() {
    $('#pane1-clicker').click(function() {
        $('#scroller').animate({ left: '-300px' }, 500);
    });
    $('#pane2-clicker').click(function() {
        $('#scroller').animate({ left: '0' }, 500);
    });
});

var $scroller = $('#scroller');
$('#pane1-clicker').click(function() {
    $scroller.animate({ left: '-300px' }, 500);
});
$('#pane2-clicker').click(function() {
    $scroller.animate({ left: '0' }, 500);
});