JQuery 内容 slider - 最佳实践？

Question

我想创建一个基本上是一个巨大的内容 slider 的网站，在页面加载时你会看到 div 1(基本上是整个屏幕)，然后你可以单击向下箭头转到第 2 页等，当你到达第 2 页我也希望能够左右移动(仅在第 2 页)，将其视为图像 slider 但带有 divs..

我知道有可用的插件，但我很喜欢自己编写它，我已经编写了一些(基本的)JQuery，它确实有效，但它看起来太臃肿了，我想要一种更好/更有效的方法来实现它......我之后是解决这个问题的最佳方法，我不是在寻找代码，因为我想学习和变得更好，但想不出解决这个问题的最佳方法，是否可以使用某种开关陈述？你会怎么做？

我还需要一些方法来确保您不会滚动超过 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);
     }
  });

});

Answer 1

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

但是出于学习的目的，我很乐意与您分享我的小知识。

我经常使用 Kelvin Luck 的 jquery 插件 jscrollpane。这是一个轻巧且可配置的插件。在我看来，它也应该是一个有趣的作品供您研究。您可以在此处找到代码:http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

这里是这个插件的一个非常简单的用法。你可能也想看看 http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

据我所知，它充分利用了 jquery 事件系统。随意理解它......并可能改进它;-)

玩得开心!