JQuery内容滑块 – 最佳实践？

我想创建一个基本上是一个巨大的内容滑块的网站,在页面加载时你会看到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);
     }
  });

});

解决方法

作为免责声明,自己制作一个真正的用途并不是一个好主意.
您可能会在不同的浏览器上遇到许多兼容性问题.

然而,出于学习目的,我很高兴与您分享我的小知识.

我经常使用来自Kelvin Luck的jquery插件jscrollpane.
它是一个轻巧且可配置的插件.
在我看来,这对你来说也是一个有趣的作品.
你可以在这里找到代码：http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

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

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

玩得开心 ！

原文地址：https://www.jb51.cc/jquery/178407.html