8

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

我知道有可用的插件，但我很想自己写，我写了一些（基本的）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);
     }
  });

});
4

2 回答 2

1

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

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

我经常使用来自 Kelvin Luck 的 jquery 插件 jscrollpane。这是一个轻量级且可配置的插件。在我看来，这也将是您学习的有趣作品。你可以在这里找到代码：http: //jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

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

据我所知，它强烈使用了 jquery 事件系统。随意理解它......也许会改进它;-)

玩得开心 ！

于 2013-04-11T21:23:06.517 回答
1

就代码而言，我会说尝试找出所有四种情况的共同点（左上右下）并将其抽象出来。我不认为 TriggerClick 变量非常直观 - 不确定它是否需要。

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

我玩弄了这个想法，但我不会发布我的代码 - 如果你有兴趣看到它，请大喊。

于 2013-04-19T16:32:36.237 回答