我想创建一个基本上是一个巨大的内容滑块的网站,在页面加载时,你会看到第1部分(基本上是整个屏幕),然后你可以单击向下箭头转到第2页等,当你到达第2页时,我也希望能够向左和向右(仅在第2页上),把它想象成一个图像。滑块,但带分隔符。
我知道有插件可用,但我很喜欢自己写,我已经写了一些(基本的)jquery,它确实有效,但它似乎太膨胀了,我想要一种更好/更有效的方式来完成它。我所追求的是如何最好地处理这一点,我不是在寻找代码,因为我想学习和变得更好,但我想不出解决这一问题的最佳方法,是否可以使用某种switch语句?你打算怎么做?
我还需要某种方法来确保你不能滚动超过div的数目,我目前正在使用一个var和if语句,但是我觉得必须有一种方法将每个人组合成一个简单的函数?
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);
     }
  });

});

最佳答案

作为免责声明,你自己做一个并不是一个好主意。
在不同的浏览器上可能会遇到许多兼容性问题。
不过,为了学习的目的,我很高兴与你分享我的一些小知识。
我经常使用Kelvin Luck的jQuery插件jscrollPane。
它是一个轻量级的可配置插件。
在我看来,这也将是一篇有趣的文章供你学习。
您可以在此处找到代码:http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js
这里是这个插件的一个非常简单的用法。你也可以看看
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
据我所知,它充分利用了jquery事件系统。
请随意理解…也许可以改进一下;—)
玩得高兴!

09-25 17:15
查看更多