JQuery 内容滑块 - 最佳实践？

关键词：

【中文标题】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 链接），然后在页面加载中使用该函数。

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

【讨论】：

jQuery 标准和最佳实践 [关闭]

】jQuery标准和最佳实践[关闭]【英文标题】：jQueryStandardsandBestPractice[closed]【发布时间】：2010-11-1718:02:38【问题描述】：我目前负责将jQuery的使用推广到我们公司内的Web开发人员社区。其中一部分涉及展示课程，但另一部分涉及... 查看详情

jquery系列-jquery最佳实践

      参考【1】阮一峰 http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html 查看详情

jQuery 优化/最佳实践

】jQuery优化/最佳实践【英文标题】：jQueryOptimization/BestPractices【发布时间】：2011-03-1422:18:36【问题描述】：好的，给牛仔装上鞍，因为这将是一个很长的时间。我整个上午都在浏览我的一些旧代码，我想知道最佳实践和优化。为... 查看详情

循环定时 jquery 函数的最佳实践是啥

】循环定时jquery函数的最佳实践是啥【英文标题】：Whatareyourbestpracticesforloopingtimedjqueryfunction循环定时jquery函数的最佳实践是什么【发布时间】：2013-11-2213:55:26【问题描述】：当我使用jQuery进行循环时，我真的很困惑如何传递值... 查看详情

在 CodeIgniter 中处理动态内容（最佳实践）

】在CodeIgniter中处理动态内容（最佳实践）【英文标题】：HandlingDynamicContentinCodeIgniter(BestPractice)【发布时间】：2012-09-1014:39:03【问题描述】：我正在使用CodeIgniter创建一个网站，并且有一个关于最佳实践的问题。我通常将我的网... 查看详情

jQuery：填充下拉列表的最佳实践？

】jQuery：填充下拉列表的最佳实践？【英文标题】：jQuery:Bestpracticetopopulatedropdown?【发布时间】：2010-10-2308:10:33【问题描述】：我一直看到的示例似乎不是最理想的，因为它涉及连接字符串，这似乎不是jQuery。它通常看起来像这... 查看详情

jQuery：取消设置/删除函数事件的最佳实践？

】jQuery：取消设置/删除函数事件的最佳实践？【英文标题】：jQuery:bestpracticeforunsetting/removingfunctionevents?【发布时间】：2011-12-1900:10:36【问题描述】：我正在使用jQuery插件CloudZoom，并且我已经更改了初始化，以便在用户单击“放... 查看详情

寻找特定类型的 jQuery 内容滑块 [关闭]

】寻找特定类型的jQuery内容滑块[关闭]【英文标题】：LookingforSpecificTypeofjQueryContentSlider[closed]【发布时间】：2012-08-2513:14:53【问题描述】：我正在寻找一种特定类型的内容滑块，但我还没有真正找到我需要的内容。它并不是我似... 查看详情

避免污染 jQuery 命名空间的最佳插件开发实践？

】避免污染jQuery命名空间的最佳插件开发实践？【英文标题】：BestplugindevelopmentpracticestoavoidpollutingjQuerynamespace?【发布时间】：2010-12-2202:02:32【问题描述】：我创建了一个jQuery插件，允许用户与树进行交互（创建、更新、删除节... 查看详情

jQuery 插件模板 - 最佳实践、约定、性能和内存影响

】jQuery插件模板-最佳实践、约定、性能和内存影响【英文标题】：jQueryplugintemplate-bestpractice,convention,performanceandmemoryimpact【发布时间】：2011-08-2405:23:17【问题描述】：我已经开始编写一些jQuery插件，并认为使用jQuery插件模板设置... 查看详情

JQuery 命名空间的最佳实践 + 通用实用程序函数

】JQuery命名空间的最佳实践+通用实用程序函数【英文标题】：BestpracticesforJQuerynamespaces+generalpurposeutilityfunctions【发布时间】：2011-05-3109:46:47【问题描述】：目前有哪些“经验法则”，用于实施JQuery命名空间以托管通用实用程序... 查看详情

带有独特动画面板的 jQuery 内容滑块

】带有独特动画面板的jQuery内容滑块【英文标题】：jQueryContentSliderwithUniqueAnimatedPanels【发布时间】：2011-11-1305:01:35【问题描述】：我正在寻找一个jQuery内容滑块，它可以让我为每张幻灯片上的内容制作动画，并在我可以控制的... 查看详情

在安全区域中存储内容的最佳实践

】在安全区域中存储内容的最佳实践【英文标题】：Bestpracticesforstoringcontentinsecurearea【发布时间】：2017-01-0618:53:14【问题描述】：在我们的项目中，我们有单独的登录页面和几个SPA，用户只有在经过适当的身份验证后才能访问。... 查看详情

用于 jQuery 选择器的 CSS 类命名的最佳实践

】用于jQuery选择器的CSS类命名的最佳实践【英文标题】：BestpracticeforCSSclassnamingforusewithjQueryselectors【发布时间】：2011-08-0616:00:23【问题描述】：在构建重Javascript的Web应用程序时，命名CSS类以保持Javascript代码和CSS样式表整洁以及U... 查看详情

更新：在 Zend Framework 中管理静态内容的最佳实践？

】更新：在ZendFramework中管理静态内容的最佳实践？【英文标题】：Updated:BestpracticesformanagingstaticcontentinZendFramework?【发布时间】：2012-01-2018:59:59【问题描述】：我有一些关于Zend框架的问题。我正在尝试使用现在默认的displayAction()... 查看详情

具有半静态背景的 jQuery HTML 内容滑块

】具有半静态背景的jQueryHTML内容滑块【英文标题】：jQueryHTMLContentSliderwithSemi-StaticBackground[closed]【发布时间】：2012-12-2512:17:33【问题描述】：我正在寻找一个模仿此功能的jQueryHTML内容滑块插件：http://www.4templates.com/website-templates/... 查看详情

内容社区行业搜索最佳实践

简介：社区内容通常包括UGC和PGC。由于关键词和内容多样性丰富、用词规范程度参差不齐，搜索引擎需要对关键词和内容进行智能语义分析，识别出用户真正的查询意图，找到最全面最相关的结果满足用户需求。... 查看详情

在 Android 中使用内容提供程序公开多个表的最佳实践

】在Android中使用内容提供程序公开多个表的最佳实践【英文标题】：BestpracticesforexposingmultipletablesusingcontentprovidersinAndroid【发布时间】：2011-04-1808:37:13【问题描述】：我正在构建一个应用程序，其中有一张用于活动的桌子和一张... 查看详情