15分钟搞定GTD：一个让你把事情做完的系统性指南 : 经理人分享
15分钟搞定GTD：一个让你把事情做完的系统性指南
“GTD”是什么？
GTD——Getting
things done，意即“把事情做完”，这是一个用于组织和追踪你的任务和项目的框架。但是框架的总体目标比仅仅“把事情做完”还要更高一点（或许它应该被称为“用更好的方式而非只是让事情自然发生（这样的话一点也不酷）的方式把事情做完”）。它的真正目的是让你对用系统搜集的事情有100%的信任。这些事情包括任务、想法、项目，模糊的像“发明最伟大的东西”或具体的像“8月25日与Ada电话讨论芝士蛋糕食谱”，总之，系统搜集的一切事情！
你会说，这听起来好像一个普通的待办事项清单系统啊？嗯，在很多方面的确是这样的，但是比普通的清单会多一些东西，并且我向你保证，它真的很简单！请往下读。
GTD的最基本假设之一是，你是一个蠢蛋——或者说，当你在考虑你要完成的工作时，你的潜意识非常迟钝。比如说，你知道在下周前你需要修自行车，但是当你驶过自行车摊的时候，你的潜意识并没有提醒你这件事，相反它会往你的大脑里植入一个不断的“我需要记住……一些事？”的念头。
Jessica Kerr完美地描述了这一现象：
假设你的大脑是一块白板，它是否写满了“要做的事情”和“不要擦掉”？那么，还有空间可以吸引并组合想法吗？
使用GTD你很快就会发现，这个方法的神奇之处就是将任务和灵光一现转化为物理的、可见的行动。
GTD可以给你带来什么？当理解并正确实施时，GTD就是一个极简单的系统，它可以追踪你需要做什么，应该做什么，或者应该思考什么。当你的系统和你对系统的信任到位了之后，你的潜意识会停止追踪你需要做的所有事，也会停止一直提醒你。这减少了压力，减轻了你的宝贵的大脑空间来做更多的建设性思考——它或许甚至可以减少真正的时间，所以你有了更多的时间去上芭蕾，绘画课程，玩旱冰。
太棒了！那么，怎么样才能用它达到目标呢？你得学习使用特殊的瑜伽锻炼，加上每日的心理练习才行。
当然不是啦！哈哈，我在开玩笑。你需要的只是维护以下这些列表，孩子用一支笔和一张纸都能做到。现今电脑都有能力维护这些列表！你得做以下几张列表：
2、“下一步行动”列表（可能在未来会发展为好几个甚至更多）
3、“等候”列表
4、项目列表
5、“将来某时/也许”列表
这些列表会被定期回顾，组成了GTD系统的骨架。下面会详细说明他们是怎么使用的。另外，处了这些列表，你还需要一个日历，可以写下对日期和时间敏感的任务和事件。in表
in表是在你有任何想法或想起任何任务时，抓取它们的表。可能是你的老板要求你给她烤一个胡萝卜蛋糕，或者看到你想看的马戏团海报。你把事物加入in表的方式限制应该非常低——记在本子上或者在你手机上按按钮。in表当然可能有好几个。你在电脑前时，可以用一个电脑程序写，你徘徊在购物中心时，可以用一本笔记本写。最重要的事是，在你想到的时候，你有条件能把东西记录下来。我们希望把工作从大脑中卸下来，记得不？
当你开始使用GTD时，你应该花一个小时把你想做（或必须做）的所有事情都记录下来。你得把所有没有按照本应该的状态或场地等进行的事情都称作“未尽事宜”。你需要换牙刷吗？要不要把茶杯还给你的阿姨？应该把你的床漆成另一个颜色吗？所有这些事都应该在你的in表中。加工in表
如果你刚开始使用GTD，在最开始的“大脑清空”步骤中，你的in表里可能收集了成吨的事项，加工它们可能得花上一会。从现在开始，in表得时常不断地加工。
你的in表上的事项应该被按它们在你的in表上显示的顺序一项一项加工处理。当加工in表上的事项时，你需要问的第一个问题是：它可以被执行吗？换句话说，你真的需要做什么吗？如果答案是不，要不你就把这件事扔掉，当然是在你再也不需要它的前提下；或把它作为一个参考事项（“我可能会需要在某一天需要这篇文章……”）；或把它加入一个“将来某时/也许”列表（比如说像“了解印尼”这样的事），或者，你就孵化它。等等，什么？你是说坐在这事上面？是的，至少部分对。如果这是件你希望过一段时间能提醒你的事项（“我真的看不懂这篇文章，我应该在两周内再看它一遍”），它应该被写进你的日历或是备忘录文件中，我们等会会解释这个。（是的，而且GTD的备忘录文件绝对非常特别）
现在，如果你正在加工的这个事项是可以被执行的，也就是说，真的需要做一点什么事才能完成它，你应该问自己这个问题：下一步应该做什么？下一步的行动应该是一个物理上的、可视的行动，也就是说，不是“计划一个蛋糕抽奖活动”，而是“给Arthur和Camille发邮件，提醒他们做一些蛋糕”
这很重要——下一步行动应该是一个物理上的、可视的行动，可以让项目离目标更进一步——这也大概是GTD最重要的一条“规则”了。多用几秒钟时间来想想，你可以做什么样的物理性行动。你得确保你的“下一步行动”列表只包含你可以在任何时刻选择去做的事情。这样的话，“预加工”这步就完成了（尽管行动本身可能就非常好地制定任务了），这也极大地降低了做事情的抗拒感。
当你决定好了下一步行动，你应该考虑能否用少于2分钟的时间来完成它，如果是的，那就做吧，立刻去做。（比如说“给外祖母发搞笑的猫的视频”。）原因很简单：如果这个行为只需要2分钟甚至更少的时间，跟踪它所需的精力比直接把它做完要多得多。如果需要多于2分钟的时间把事情做完，那么如果可以的话，你就委派给其他人——注意好什么事情被委派了，以及什么时候可以把这件事加入“等候”列表。或者把这件事加入你自己的、只要有时间就做的“下一步行动”列表中。除非你神秘地委派了任务，下一步行动大部分情况下会让事情终结。如果“未尽事宜”需要多于一步来终结，你应该在项目列表中注明总体的目标，我会在下面一小块里解释这件事。
总结一下，当加工你的in表（们）时，你应该遵循以下步骤：
GTD工作流程：in表中搜集“未尽事宜”，加工它。如果是一个行动，它被完成，被拖延或者被委派出去。如果这个被加工的事情需要多于一个行为去完成，它也需要在项目列表中记录。“下一步行动”列表
所以什么是“下一步行动”列表呢？嗯，呃……很明显，是列出了你下一步行动的一份清单。它应该也是“尽快完成的行动”列表——也就是在你没在Youtube上看搞笑的猫咪视频或者玩“糖果粉碎传奇”时，可以从表中选择去做的事情。“等候”列表
当你把任务委托给他人：发出一封你希望（或需要）被回复的邮件，订购了一些东西，或者因为你在等待其他人做一些事情你在一个任务中被堵住了。你应该把这些事情写在你的“等候”列表里，并且记得永远要标记上现在的日期。所以你可以给你的同事Marvin发邮件说“我还在等你的那份扯蛋的报告，你之前说会在一个月里完成的，今天已经是第32天了！”项目列表
如果你还在继续看这篇文章的话，你可能会担忧在你“下一步行动”列表中，一个“研读人工智能的教材”的行动就基本上代表了你需要统治世界的计划，这可不行。一旦这个行动完成，从我的列表上被擦去，整个计划会不会更容易脱轨？是的，这真的有可能。这就是需要项目列表的时候。
GTD对一个项目的定义非常广泛，需要多于一个行为来完成的任何事物都叫做一个“项目”。这些项目应该在你的项目列表中。这个列表应该是一系列项目名称，并且——如果你乐意的话——加上一些结果描述。当你回顾项目列表的时候，你得确保，对应每一个项目，总有至少一个行为被列在你的“下一步行动”列表上，因此你的项目就不会被忘掉。环境标签
环境标签是你在“下一步行动”列表上加的标签，说明了行动的地点，或者为了完成它需要的设备。有很多方法可以给行动事项加上环境标签，最简单的一种可能是直接有不一样的“下一步行动”列表，给每一个环境标签都建一个。如果你使用一个先进的电子列表管理系统你可以有给每个标签的“智能”列表——这都是一样的。（用智能手机的话，或许可以使用它的定位功能，让它仅能显示与你现在的位置相关的现有行动事项。如果这个设想真的实现了话：真棒！我们生活在未来！）
通常我们会用“@+环境用词”表示地点，其他的状态上也可以加@。环境标签的例子有@家，@电脑，@办公室环境标签的范例：
购买更多的彩虹色狗粮 @市中心 或 @商场
登录& @电脑 或 @万维网
对陌生人微笑@任何地方
你需要多少环境标签取决于你的下一步行动的数量和你的工作的性质。重要的事是能够在一眼内评估——因为你可以完成的行动都依赖于你的身体的位置，以及你现在可以使用的仪器。不过你可以为你在任何地方都可以做的事情（打电话给妈妈，获得浓汤配方）使用一个“任何地方”的环境标签，这非常棒。议程标签
如果你和某些人有常规会面，给每人一个“议程标签”会有很多好处。当你想到他们时，你可以在列表中写下你想要和他们在下一次会面中要说的事情。比如说，如果和Foobert有周例会，你可能会考虑写一个@Foobert议程的标签。当你的团队/经理/主管等变化时，这些标签当然也可以改变。&“将来某时/也许”列表
你不想失去你的百万美元点子，获得妄下结论的名声，但是这是当你有更多时间时你才能思考的一个项目。你不想要让这事污染你的“下一个行动”列表或者你的项目列表。（记住，“下一步行动”列表包含的事情应该尽快被完成，而你会定期回看项目列表来确保所有的项目有至少一个下一步行动。）
这就是“将来某时/也许”列表出现的时候，这个列表仅包含你可能在未来某些时候才能去想的想法和项目。这是“把卧室里那幅丑陋的画换掉”和“开始做礼拜”这样的任务应该被分配到的列表（假设你不想现在马上去做其中的任何一件事）。这张列表应该与系统中的其他部分一起每周都被回顾，我们会在下面的每周回顾中描述这件事。日历日历是你需要在一个特定的日期或特定时间去做的事情——没其他要说的了！就是这样。不要在你下周三的日历上写“安装顶部广告”，如果你仅是认为你想要把这件事做完。
但是……为什么？！
如果你的日历上只有对时间和日期敏感的事项会好很多，因为它真的告诉你在那天你必须做的事情，而且没有其他事项混淆进来。你想做的但是没必要在一个特定的时间去做的事情无论如何都会被列入“下一步行动”列表中，所以你得提醒自己最后总有机会去做它。每周回顾
David Allen有关GTD的著作把每周回顾称为一个“成功的关键因素”，他没在开玩笑。如果你开始使用GTD框架，并且你不是一个机器人，事情会扑过来。你会完成项目的下一步行动但是忘了为这个项目添加一个新的下一步行动。你会忘了去掉某个你明白——如果你真的考虑过了——你不会在近期做的“下一步行动”，因为更重要的事情发生了，等等。
每周回顾的回顾频率是——你猜猜——每周一次。这会花上一段时间，所以你应该理想化地提前设置一些时间（可能至少30分钟），比如周五或周日下午。当进行每周回顾的时候，你应该做以下事情：
1、确保每个项目有至少一个下一步行动。确保每个行动在你的“下一步行动”列表中真的是某些如果你在接下来的一周内有时间的话你想要或需要去做的事，如果不是，把它（并且/或者包含这个行动的那个项目）移动到“将来某时/也许”列表中，或者——如果你认为你没可能会去做它的话——彻底删掉它。（要对自己坦诚。）
2、通览你的“将来某时/或许”列表，看是否有一些项目/行为应该移到现在的项目列表或“下一步行动”列表中去。如果在你的项目列表中创建一个新的项目，确定它的下一个物理上的、可视化的行动，并把它加入“下一步行动”列表中去。触发列表
当进行每周回顾的时候，有个好办法是使用触发列表。一个触发列表就是一个有一些关键词的列表，它会触发你的大脑，让你记住你没有在你的系统中捉住的任何未尽事宜。一个触发列表看起来应该像这样：
l& 项目开始，没有完成
l& 需要开始的项目
l& 我需要支持的人
当制作你的触发列表时，把你记得的所有在你in表中东西都放进去，用于下一步的加工。
触发列表的一个范例可以见Lifehacker给学生的触发列表（/5611657/use-a-weekly-review-list-to-stay-a-step-ahead-this-semester）。当你有更多的经验，学习到什么才是对你最好的时，你可能需要个性化你自己的列表，让它有用起来
为了真的让你的GTD系统运转顺利，有一些重要的“最高指示”建议你遵从。当你开始用GTD顺手了之后，你可以变得宽容一点，如果你认为这样更好的话。
l& 这很重要，你在列表间，或者是每一个“下一步行动”列表间都有严格边界。如果你经常发现你自己在思考一个“下一步行动”该用什么样的环境标签，那么你最好能重新考虑一遍你的标签。
l& 你的工具应该用起来很好玩——但是不会过于好玩！如果你有一个缓慢的复杂的工具来管理你的列表，你会下意识地抗拒搜集小任务。如果你的工具太好玩了乃至影响使用，你会过度使用工具，花大把时间试用它奇妙的功能上。找到对你奏效的东西。工具
阅读/回顾文件夹和备忘录文件夹是两个工具，他们没有直接成为GTD方法的一部分——或许把GTD和他们一起使用更好。工具一：阅读/回顾文件夹
你可能有不少“读《***文件》”的行动在你的“下一步行动”列表中。一个阅读/回顾文件夹就是一个你到处携带的物理文件夹，包含了文件，档案，或者任何需要阅读的东西。当你有几分钟没事干的时候，你要让可以读的文件就在手边。在牙医等候室里？在咖啡馆里等你的食物？都是绝好的机会来阅读《弹涂鱼属的仔鱼系统发生学》论文或假装读你老板给你的备忘录！
在这里，有严格边界也很重要。你要把你真的需要读的东西放进这个文件夹，所以你在一天里些微的空闲时间里真的会把它们拿出来。工具二：备忘录文件夹
在GTD中，这个概念特指一个43页的搜集文件夹。为什么是43？因为这意味着你可以每个月31天都有一页，加上12个月每个月一页——就是43页。
所以这个文件夹怎么用呢？你可以放置在特定的日子你会需要的物品（演唱会门票），记下在特定的日子里你可能会想要做的事情（记住，日历只能写特定的日期或时间发生的事情），或者你不是很懂的课程笔记（我希望当我的潜意识消化它了一会后，我能在一周内回顾这些）。
当你每天起床后，打开文件夹今天的那一页，然后你放入你的演唱会门票，决定你会在今天把狗牵进狗理发店，但是把课堂笔记推迟三天——因为你现在真的没有时间。每天清空这页文件夹，把它放在最后面，把明天的那页放在前面。在每个月最后，你给新的月份设置文件夹页，并处理它的内容——也就是，把东西放在正确的日子文件页中。
所以备忘录文件夹提供一个可以在未来给你发送提醒的方法——备忘你的记忆。啊哈！关于这个指南
这个指南是为了给你一个简明的，有逻辑的关于“把事情完成”的方法指南。这套GTD方法尽可能简练。这是从个人角度出发而写的，其他人可能会对GTD不同部分有不一样的重要性评估。
如果你希望了解一个完整的GTD方法，你最好去看David
Allen的书，里面系统化陈述了他的方法。译者：&原文地址：
（下载iPhone或Android应用“经理人分享”，一个只为职业精英人群提供优质知识服务的分享平台。不做单纯的资讯推送，致力于成为你的私人智库。）
作者：佚名
文章相关知识点
评论&&|&& 条评论
畅阅·猜你喜欢在一个15分钟共享社区生活是一种什么样的体验？
近日，全球首家"共享书店"在合肥开业，只需缴纳99元押金，便可免费把书从书店带回家。这个创意吸引了大量读者前来体验，通过共享的方式把买书变成借书、书店变成自家书房、个人阅读变成共享阅读。
图|来自新浪网 7月16日全球首家“共享书店”开业，书店内人头攒动
除了“共享书店”，在中国，五颜六色的共享单车已经成为了城市街道的风景线，也解决了许多上班族出行“最后一公里”的实际问题。最近，共享单车走出国门，落户大不列颠，引起当地人和各大外媒的强势围观。
图|来自网络
共享经济的模式如今深深影响着人们的观念与生活，它弱化“拥有权”，强调“使用权”，能最大程度上实现闲置物品或服务者的价值。《中国分享经济发展报告2017》显示，2016年中国分享经济市场交易额约为34520亿元，同比增长103%；参与者总人数超过6亿人。
当共享经济风靡全球之时，对于生活在P8社区的我们而言，“共享”的早已不止是单车、雨伞、篮球，我们共享的，是一个15分钟随处可达的整体社区。
15分钟社区内解决所有日常事务
在P8社区，不管是步行还是骑车，15分钟就能解决你所有的日常事务。这意味着不用为了工作花一两个小时挤在逼仄的车厢里，也不会因为送孩子上学堵在城市的街道上。在这15分钟里，你可以聆听自然的乐章， 观察四季的变化，触摸地面的温度，感受微风撩起你的发梢。一天的开始与结束都发生在这样轻松的气氛里。
P8不仅是一栋8层楼高的灰色建筑，还是一个沉浸式的共享空间。10几个不同的入驻团队+100多个有趣的大脑在这里形成了一个沉浸式的生活剧场。当木门取代了防盗门，热情融化了冷漠，联结打破了隔阂后，大家沉浸在我们可以在厨房一起准备一顿丰盛的美味，找一个宽敞的空间举行一场头脑风暴，共同开发一片生机盎然的楼顶花园。
未来，关于空间的共享还有更多的可能性。在满足个人居住需求的前提下，每个人可以把一部分私人空间让渡出来，设计成把具有各种功能的公共空间，比如小剧场、桌游室、小酒吧、咖啡馆等。
工作坊、Open space、读书会、公共图书馆是P8知识共享的主要形式。互联网时代信息爆炸和知识碎片化使得每一个人都身怀绝技，通过知识共享，我们能更加方便快速地获得知识并运用于实践，也正是因为知识共享，我们有机会与来自世界各地的青年领袖、业界专家、文化名流互相交流探讨大家关心的共同话题。
共享的精神
P8作为一个共享社区，其实比起共享这件事情，更重的是拥有共享的精神。
从统观全局的角度出发，实践一种可持续的生活方式，不仅仅关注眼前的利益和个人的利益。有了这样的共享精神，一个共享社区就水到渠成了。我们每个个体都能在这样的共享社区里，重新有意识的构建真实的对话，发生真实的交往关系，构建一个更加积极参与的日常生活场景。于是我们收获到的是，被无限激发的潜能，以及生而为人的幸福感。
关于这个15分钟共享社区，P8居民有话说
昀洛老师（LOKA YOGA瑜伽工作室创始人）：P8这个共享社区对社会、公司、个人而言都太重要了。共享让一批有意思的人集结在一起，做一些倡导性和正能量、有价值的事，连接了更多资源交流和合作机会。在这个共享社区，和有趣的思维碰撞，体验不同的工作、生活，是件很有意思的事情。
豆豆（独立烘焙师）：在P8说到共享，那最无私的就是纯净的空气和水啊！
Frea（P8实习生）：第一次来到P8时心里满是好奇和惊叹，在这里工作的每一个人都会把自己的想法放在某个空间里展示出来，这和我之前接触过的任何公司都不一样。最有趣的是，这里还有一些可爱的小动物，它们也会四处走动，是不是跟你来个互动。P8所有的布局、空间、陈设都让人沉浸在一种共享的氛围中，非常美妙。
Echo（P8小伙伴）：周一到周五，是大部分人哀嚎的痛苦工作日，而在这个全面丰富的社区里，工作和生活的分量都很足，特别想分享的是下班后有滋有味的生活。下班步行回到K7生活慢部落（我们居住的地方）大约是下午6点半，夏日的天空，美的动人心魄。我们狂奔着跑到208米J57的楼顶停机坪，吹着呼呼的风，躺在无边无际的晚霞里，身边的设计师2551都情不自禁作诗一句“真是每天都一样，每天又都不一样”。
上一周，每天晚上都有活动，每晚都能收获不一样的体验。在回音广场，营地教育开幕仪式上，一群大学生和研究生正式成为了营地导师，他们又唱又跳展示着自己的功力，几岁到十多岁的学生们哈哈大笑拍红了手，学生们在最快乐健康的环境里受到培训启发又可以成为下一轮的导师。这是我看到各个年龄层的学生们集合在一起画面最为感人的一次。
在台湾之夜，在P8实习了一个月的港澳台实习生即将离开，他们精心筹备了这样一个告别与感谢的夜晚，他们在歌舞游戏中展示着青春、大胆和创造力，带来了有意思的台湾文化。
每周五晚的谈天说地更是让这个社区的夜晚明亮起来，各路分享者带来了美妙的色彩，这样的夜晚为发生更多的故事筑起了桥梁。
在J57楼顶的露天游泳派对上，我们与天空流水“赤诚相见”，感受充分的自由，为第二天的工作注入能量。
15分钟共享社区，我最深的体会是，工作和生活可以有机的结合在一起，让每一天都值得回味。
西方国家最早出现的共享公寓可以视为共享社区的雏形，而P8希望，通过共享社区探索更多种生活的可能性和居住方式，打造一种沉浸式的生活状态，你曾经在共享社区生活过吗？关于共享社区，你有什么自己独到的见解，欢迎点击留言回复。
编辑：August
照片：邓大神、网络
部分资料参考来源网易新闻
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点十五分钟用JavaScript基础写一个图片轮播效果 + 思路详解 - 简书
十五分钟用JavaScript基础写一个图片轮播效果 + 思路详解
轮播图的基本样式
这次也是一个适合JavaScript初学者的小练手，用JavaScript的基本知识去写一个轮播图，其实轮播图有很多方法去实现，像用一些框架，Bootstrap之类的，或者CSS3都可以轻松做出漂亮的轮播图，这次去用JavaScript实现，主要是为了锻炼自己使用Js的能力，代码非常简单，我会先放出HTML和CSS部分，最后详细讲解Js部分，还是那句话，重要的是思路，希望Js的初学者可以跟着我动手敲一敲，绝对对自己的能力有提升！完整代码也放在GitHub上了，链接在最后。
效果演示：卡顿是因为GIF图片压缩了，损失了帧数
HTML代码部分
&div class="main_div"&
&div class="arrows"&
&span title="1" class="arrow"&&&/span&
&span title="0" class="arrow" style="float: right"&&&/span&
&ul class="ul_img"&
&li class="li_img"&&/li&
&li class="li_img"&&/li&
&li class="li_img"&&/li&
&li class="li_img"&&/li&
&div style="margin-left: 600px"&
&div class="div_btn"&&/div&
&div class="div_btn"&&/div&
&div class="div_btn"&&/div&
&div class="div_btn"&&/div&
整个HTML非常简单，分三部分，第一部分就是四张图片，第二部分就是左右方向键，第三部分就是底部的四个圆角矩形，没什么说的，为了简化代码，都是最简单的。
CSS代码部分
width: 100%;
width: 800
list-style:
width: 6000
padding: 0
transition: all 2s;
.main_div {
width: 800
z-index: 9999;
padding-top: 230
width: 800
.arrows span {
font-size: 3
.arrows span:hover {
/*变小手*/
background-color: rgba(192, 192, 192, 0.29);
.div_btn {
border-radius: 100
background-color:
height: 10
margin-left: 10
margin-top: 130
.div_btn:hover {
background-color:
CSS部分也是尽量简洁，没有设置太花哨的样式，随意设置了一下，各位可以自己发挥，主要为了写JavaScript……唯一要注意的就是我为.li_img设置了一个transition。由于是用固定像素设置的宽高，所以不同浏览器可能会显示样式有所区别，不影响功能就是了，这里我使用调试的浏览器是Chrome和Firefox
JavaScript部分
请先不要直接看这部分代码，先看我的思路讲解再看这部分，你绝对可以轻松理解
//跑动的次数
var count = 0;
//动画的执行方向
var isgo =
//定义计时器对象
window.onload = function () {
/*获取ul元素*/
var ul_img = document.getElementsByClassName("ul_img")[0];
//获取所有的li图片元素
var li_img = document.getElementsByClassName("li_img");
//获取控制方向的箭头元素
var arrow = document.getElementsByClassName("arrow");
//获取所有按钮元素
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
/*定义计时器，控制图片移动*/
showtime();
function showtime() {
timer = setInterval(function () {
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= 0) {
count = 0;
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
/*鼠标进入左右方向键操作*/
for (var i = 0; i & arrow. i++) {
//鼠标悬停时
arrow[i].onmouseover = function () {
//停止计时器
clearInterval(timer);
//鼠标离开时
arrow[i].onmouseout = function () {
//添加计时器
showtime();
arrow[i].onclick = function () {
//区分左右
if (this.title == 0) {
if (count & 3) {
count = 0;
if (count & 0) {
count = 3;
ul_img.style.transform = "translate(" + -800 * count + "px)";
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
//鼠标悬停在底部按钮的操作
for (var b = 0; b & div_btn. b++) {
div_btn[b].index =
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a & div_btn. a++) {
div_btn[a].style.backgroundColor = "aquamarine";
div_btn[this.index].style.backgroundColor = "aqua";
//让count值对应
//为了控制方向
if (this.index == 3) {
if (this.index == 0) {
count = this.
ul_img.style.transform = "translate(" + -800 * this.index + "px)";
div_btn[b].onmouseout = function () {
//添加计时器
showtime();
首先，在思考这个轮播图怎么去实现的时候，请先考虑要为这个轮播图设置什么样的功能，我设定的有三个功能：
图片可以自动右向轮播，轮播至最后一张图片的时候，反向向左轮播，循环反复
可以用左右方向键去控制图片轮播方向
可以利用下方的圆角矩形来选择浏览某一张图片
在明确了功能之后，接下来依次解决不就行了，好，我们看第一个问题，怎么实现图片可以自动右向轮播，轮播至最后一张图片的时候，反向向左轮播，循环反复呢？没错，使用定时器setTimeout()或者setInterval()可以轻松解决，在这里我就使用setInterval()，如果有不太了解的，请点这里。好了，接下是第一部分功能的代码思路：
第一个功能
要想让图片自动轮播，我们首先去设定一个函数showtime()，当然写完了这个函数，我们的第一个功能也就完成了，好的，那我就开始写了……
好吧，当然不能直接写了，首先你得思考，既然图片一开始向右轮播，你总得先设定一个方向吧，然后再考虑，还得设定一个跑动的次数，比如初始位置为第一张图片，我要向右跑动3次，就可以到达第四张图片，然后还要设定一个定时器对象，用处以后会说到，这几个必须是全局变量，所以必须在一开始就声明：
//跑动的次数
var count = 0;
//动画的执行方向
var isgo =
//定义计时器对象
然后可以开写了，当然要先获取图片元素：
/*获取ul元素*/
var ul_img = document.getElementsByClassName("ul_img")[0];
//获取所有的li图片元素
var li_img = document.getElementsByClassName("li_img");
好的，准备工作到此结束，图片轮播的原理就是图片排成一行，然后准备一个只有一张图片大小的容器，对这个容器设置超出部分隐藏，在控制定时器来让这些图片整体左移或右移，这样呈现出来的效果就是图片在轮播了，我们这里先function一个showtime()函数，并在里边添加一个定时器来为控制图片轮播做准备：
function showtime() {
timer = setInterval(function (){ }, 4000);
在上面，我定义了每次延迟4000毫秒（即4秒）来执行一次setInterval()里的匿名函数function(){ }，是为了尽可能的让轮播效果不至于太快。然后我在匿名函数function(){ }加入以下三行代码：
function showtime() {
timer = setInterval(function (){
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
记得之前我们声明了isgo全局变量,并为它赋值为布尔值false吗？这里if判断语句会直接成立，if中的语句会让count加一，并为ul_img设置了style样式，让ul_img整体（即四张图片整体的ul）向左移动800px，（因为在CSS中为图片设置了width为800px），所以以上语句会控制图片集体向左推入800px的距离，让第二张图片进入到显示容器中，、（在此之前第二三四张图片都是隐藏的，因为我设置了超出部分隐藏），所以此时轮播图的状态是第二张图片显示，第一三四张图片隐藏，然后每隔4秒就会重复上述过程，然后这样就实现了轮播……吗？
很快你就会发现问题，那就是当向左移动了三次（即count = 3时），显示的是第四张图片，这没问题对吧，但是再过4秒，可就不妙了，你会发现图片再往左移（即 count = 4时），妈蛋！没图了！显示的是空白，怎么解决呢？hin简单！加一个if判断语句不就行了！
function showtime() {
timer = setInterval(function (){
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
以上代码，我加了一个判断语句，在count大于等于li.img.length-1（即count &= 3）时，禁止count再自增，同时改变isgo的值，让轮播图开始反向滚动，所以就会在增加一个else来描述isgo=true的情况：
function showtime() {
timer = setInterval(function (){
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= 0) {
count = 0;
showtime()；
else的情况就是控制图片反向轮播，所以以上代码很好理解，就是count--，并且在count &= 0时，为isgo重新设置false，让图片再正向轮播，循环往复，最后再调用showtime()函数，第一个功能到此为止就完全实现了！
第二个功能
第二个功能我们要添加鼠标进入左右两个方向键的操作，首先获取左右两个方向键。
//获取控制方向的箭头元素
var arrow = document.getElementsByClassName("arrow");
好了，由于方向键有两个，所以我们要来用for循环来为它们绑定事件：
for (var i = 0; i & arrow. i++) {
//鼠标悬停时
arrow[i].onmouseover = function () {
//停止计时器
clearInterval(timer);
//鼠标离开时
arrow[i].onmouseout = function () {
//添加计时器
showtime();
以上四条语句为方向键绑定了两个事件，鼠标悬停时，我们利用clearInteral()来终止定时器，这就是前面我们把timer要声明为全局变量的原因，便于我们可以在想停止定时器的时候停止它。接下来我们为方向键添加onclick事件，以便我们可以通过其控制方向：
for (var i = 0; i & arrow. i++) {
//鼠标悬停时
arrow[i].onmouseover = function () {
//停止计时器
clearInterval(timer);
//鼠标离开时
arrow[i].onmouseout = function () {
//添加计时器
showtime();
arrow[i].onclick = function () {
//区分左右
if (this.title == 0) {
if (count & 3) {
count = 0;
if (count & 0) {
count = 3;
ul_img.style.transform = "translate(" + -800 * count + "px)";
不知道大家注意到了没有，我在之前HTML中为左右方向键分别设置了title值：0和1；所以这里直接用title值来区分左右，为右方向键我们执行count++；为左方向键我们执行count--；同时也考虑到count&3和count&0的情况，这些之前提到过，这里不再赘述，到此为止，第二部分的功能也实现了，很简单吧
第三个功能
鼠标悬停在底部圆角矩形的操作，同样的道理，首先获取四个圆角矩形，然后用for循环为它们绑定事件：
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
//鼠标悬停在底部按钮的操作
for (var b = 0; b & div_btn. b++) {
div_btn[b].index =
div_btn[b].onmouseover = function () {}
div_btn[b].onmouseout = function () {}
有的同学可能不太懂div_btn[b].index =这条语句干什么的用的，关于这个问题，涉及到循环绑定的一个坑，请大家看这篇文章
好，接下来我们先写鼠标悬停事件：
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a & div_btn. a++) {
div_btn[a].style.backgroundColor = "aquamarine";
div_btn[this.index].style.backgroundColor = "aqua";
//为了控制方向
if (this.index == 3) {
if (this.index == 0) {
//让count值对应
count = this.
ul_img.style.transform = "translate(" + -800 * this.index + "px)";
有了之前的基础，我在讲鼠标悬停事件的时候，各位应该就更容易理解了，我首先在鼠标悬停时用 clearInterval(timer);来停止定时器，然后为每个圆角矩形都加上颜色，并且为悬停的圆角矩形变色，之后考虑到了大于三和小于零的情况，再之后，我把当前的index属性值赋给count，让用户可以通过悬停底部圆角矩形来选择看第几张图片。
最后再加上鼠标离开事件：
div_btn[b].onmouseout = function () {
//添加计时器
showtime();
大功告成！！！至此所有功能写完。其实最后还有一步就是：
for (var a = 0; a & div_btn. a++) {
div_btn[a].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
将以上代码，添加到功能一和功能二的代码里，目的是，让图片自动轮播和控制左右方向键时，底部圆角矩形也能随之变色。以下是源码，放在Github上了：
最后再放一遍完整的JS代码：
var count = 0;
var isgo =
window.onload = function () {
var ul_img = document.getElementsByClassName("ul_img")[0];
var li_img = document.getElementsByClassName("li_img");
var arrow = document.getElementsByClassName("arrow");
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
showtime();
function showtime() {
timer = setInterval(function () {
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= 0) {
count = 0;
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
for (var i = 0; i & arrow. i++) {
arrow[i].onmouseover = function () {
clearInterval(timer);
arrow[i].onmouseout = function () {
showtime();
arrow[i].onclick = function () {
if (this.title == 0) {
if (count & 3) {
count = 0;
if (count & 0) {
count = 3;
ul_img.style.transform = "translate(" + -800 * count + "px)";
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
for (var b = 0; b & div_btn. b++) {
div_btn[b].index =
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a & div_btn. a++) {
div_btn[a].style.backgroundColor = "aquamarine";
div_btn[this.index].style.backgroundColor = "aqua";
if (this.index == 3) {
if (this.index == 0) {
count = this.
ul_img.style.transform = "translate(" + -800 * this.index + "px)";
div_btn[b].onmouseout = function () {
showtime();
爱嘎的前端爱好者