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事件系统。随意了解它......也许可以改进它; - ）

玩得开心！

Answer 2

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

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

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

JQuery内容滑块 - 最佳实践？

2 个答案: