JQuery内容滑块 - 最佳实践？

Question

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

我知道有插件可用,但我非常喜欢自己编写,我写了一些(基本的)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事件系统。请随意理解它......也许可以改进它;-)

玩得开心 ！