JQuery 内容滑块 - 最佳实践？

Posted 2023-05-08

【中文标题】JQuery 内容滑块 - 最佳实践？

【英文标题】：JQuery content slider - best practice?

【发布时间】：2013-04-02 10:33:04

【问题描述】：

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

);

【问题讨论】：

很好，你尝试自己制作 :) 看看this page 有一些很好的模板可以编写插件/小部件。它可能会帮助您在项目中获得更多结构。

试试看Ascensor，它似乎工作得很好。祝你的滑块好运！

【参考方案1】：

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

不过出于学习的目的，我很乐意与大家分享我的小知识。

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

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

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

玩得开心！

【参考方案2】：

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

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

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