爱站程序员基地前言
对于一名前端开发的初学者来说，实现一个新的需求总会遇到没思路的情况，那么就需要梳理好脉络，想实现哪些效果，用些什么怎么去实现，中途可能会遇到哪些问题，在遇到bug时也按照这个流程再捋一遍。下面我将以j用Query写轮播图全流程为例子。
思维流程
1.需要实现哪些效果
- 自动播放到下一张图片
- 点击按钮后跳转到对应图片
- 无论是自动播放还是点击按钮跳转到对应图片，移动到对应的图片后按钮同时也变成图片对应的按钮且按钮的颜色改变
- 鼠标移入图片时，自动播放停止；鼠标移出图片时，自动播放继续
2.实现这些效果需要用到哪些
- 首先需要绑定事件。触发这些效果需要绑定哪些标签？按钮 和 图片区域
- 自动播放—–需要定时器setInterval
- 点击按钮跳转—–click，移入停止——mouseenter +清除定时器，移出继续———mouseleave +重新运行定时器
- 图片移动—–animate
- 图片与按钮一一对应——-选择下标eq($(this).index()) this指代的就是图片区域
- 按钮颜色随图片移动而改变——属性选择器attr（），先清除掉原有设定的，然后设置点击按钮时颜色改变，自动播放时按钮颜色改变，那么只需将空的class变成预设的active
3.遇到的问题
- 下标是从0开始，而按钮是从1开始。那么移动过程中就会出现问题。那么如何解决呢？当移动到最后一个下标时移动到第一张图，并且下标也变会到0.
轮播图的核心就是切换 图片怎么处理，按钮怎么处理
下图是本人当时敲轮播图简要写的提纲：
使用jQuery不要忘记引入jQuery文件
源代码
jQuery部分
$(document).ready(function() {var btn = $(\".container\").find(\"ol\").find(\"li\");var ul = $(\".container\").find(\"ul\");// 绑定事件var timer = 0; //定时器初始值var iNow = 0; //当前显示图片的下标btn.click(function() {// 当点击按钮时触发iNow = $(this).index(); //iNow =当前点击的下标tab();})$(\".container\").mouseenter(function() {clearInterval(timer);}).mouseleave(function() {timer = setInterval(function() {iNow++;tab();}, 2000)})timer = setInterval(function() {// 自动触发iNow++;tab();}, 2000)function tab() {btn.attr(\"class\", \"\").eq(iNow).attr(\"class\", \"active\");// 按钮的class消除，点击下标-->当前class变为activeif (iNow == btn.size()) { //下标为5--->第六个按钮btn.eq(0).attr(\"class\", \"active\");}ul.animate({top: iNow * -150}, 500, function() {//判断是否是最后一张图片if (iNow == btn.size()) {iNow = 0;ul.css(\"top\", \"0\");}})}})
html部分
<div class=\"container\"><ol class=\"btn\"><li class=\"active\">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol><ul class=\"pic\"><li><a href=\"#\"><img src=\"img/1.jpg\" alt=\"\"></a></li><li><a href=\"#\"><img src=\"img/2.jpg\" alt=\"\"></a></li><li><a href=\"#\"><img src=\"img/3.jpg\" alt=\"\"></a></li><li><a href=\"#\"><img src=\"img/4.jpg\" alt=\"\"></a></li><li><a href=\"#\"><img src=\"img/5.jpg\" alt=\"\"></a></li><li><a href=\"#\"><img src=\"img/1.jpg\" alt=\"\"></a></li></ul></div>
css部分
* {padding: 0;margin: 0;}li {list-style: none;}img {border: none;}body {background: #ecfaff;}.container {width: 470px;height: 150px;overflow: hidden;position: relative;margin: 150px auto 0;}ol {position: absolute;right: 5px;bottom: 5px;z-index: 2;}ol li {margin-right: 3px;display: inline;cursor: pointer;background: #fcf2cf;border: 1px solid #f47500;padding: 2px 6px;color: #d94b01;font-family: arial;font-size: 12px;}.active {padding: 3px 8px;font-weight: bold;color: #ffffff;background: #ffb442;position: relative;bottom: 2px;}ul {position: absolute;top: 0;left: 0;z-index: 1;}ul li {width: 470px;height: 150px;float: left;}ul img {float: left;width: 470px;height: 150px;}
（文章写的不好还请多多指教）
