jQuery内容滑块 - 最佳实践？

Question

我想创建一个基本上是巨大内容滑块的网站，在页面加载时，您将看到div 1（基本上是整个屏幕），然后您可以单击向下箭头以转到第2页等，当您到达第2页时，我还想能够左右移动（仅在第2页上），将其视为带有divs的图像滑块。

我知道有可用的插件，但我很喜欢自己编写它，我已经编写了一些（基本）JQuery，它确实起作用，但它似乎过于臃肿，我想要更好/更有效的方法来做到这一点。我想知道最佳方法是如何处理这个问题的，我不需要代码，因为我想学习并变得更好，但是无法想出最好的解决方法，是否可能使用某种switch语句？您如何处理这个问题？

我还需要某种方式来确保您不能滚动超过div数，我目前正在使用if语句的var，但感觉必须有一种将所有人合并成简单函数的方法？

JS在下面，还有一个JSFiddle 谢谢！

http://jsfiddle.net/W4SVz/

$(function () {
  var box = $('.box');
  TriggerClick = 0;

  $("#down").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 0){
         TriggerClick = 1;
         $(box).stop().animate({top:'-='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 2;
         $(box).stop().animate({top:'-='+height}, 500);
     }
  });

   $("#up").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 2){
         TriggerClick = 1;
         $(box).stop().animate({top:'+='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 0;
         $(box).stop().animate({top:'+='+height}, 500);
     }
  });

  $("#left").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'-='+height}, 500);
     }
  });

   $("#right").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'+='+height}, 500);
     }
  });

});

- woolm110

---

你可以尝试自己制作 :) 参考 这个页面，有一些好的模板可用于编写插件/小部件。这可能有助于使你的项目更有结构性。 - Brainfeeder

尝试看一下Ascensor，它似乎运行得非常好。祝你的滑块好运！ - PHearst

Answer 1

从编码方面来说，我建议尝试找出所有四种情况（向上、向下、向左、向右）的共同点并将其抽象化。我认为TriggerClick变量不是很直观，不确定是否需要它。

使用插件模式将您的函数添加到jQuery中（请参阅Brainfeeders链接），然后在页面加载中使用该函数。

我尝试了这个想法，但我不会发布我的代码-如果您有兴趣看到它，请告诉我。

- Tom Elmore

Answer 2

作为免责声明，自己制作实际使用并不是一个好主意。你可能会在不同的浏览器上遇到许多兼容性问题。

然而，出于学习目的，我很高兴与你分享我的一点知识。

我经常使用Kelvin Luck的jquery插件jscrollpane。它是一个轻量级且可配置的插件。在我看来，这也应该是一个有趣的东西供你学习。你可以在这里找到代码：http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js 这是一个非常简单的用法示例。你也可以看一下http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html 据我所知，它充分利用了jquery事件系统。请随意理解它...也许还可以改进它;-)

玩得开心！

- Cyril