Js的前端效果编写逻辑（2）
上一次聊到了编写的逻辑，有很多娃对我吐槽不理解，求实例。
于是乎，我决定还是把编写的大概过程整理整理，拿出来说说看。
例如，当我们接到了这么一个需求，我们应该如何去整理自己的思维呢？（不是百度一下看看有没有现成的）
让我们来仔细分析一下它的热区。首先左右两个按钮，点击向左或向右横向滚动一张图片。下面的小圆点，是这个轮播器的page，点击对应的序列，显示到响应的图片。
不难理解吧？
另外我们还要让它更程序话一点的去想。
当我向右播到最后一张的时候呢？
两种比较和谐的解决方式：1是让按钮消失，2是当图片已经显示最后一张时再点击返回张。向左按钮同理。
下面的按钮，我们手动的对应图片数量去添加么？
那样不现实，因为图片多少并不是固定的，以后可能添加，可能删减。你写脚本永远要以它比你在网站的时间还长为目标。。我们需要动态添加。
so~~我们来研究一下动画原理吧。
如上图，我们可以怎么做呢？很简单。用js去操作html和css。
我们来锁定所修改的属性吧。
我们首先需要用个只有一张图片大小的box把图片框起来。并且写好css为 overflow:hidden(叫它overbox);
然后我们可以有很多种办法完成这个动画效果，可以修改img的z-index和left值。可以在图片外层写overflow的内层中加入一个div(我们先叫它imgbox)，然后把img全部float:left显示为一横行。然后我们通过修改imgbox的margin-left的值来完成这个效果。
Ok，具体的html和css自己去整理哈，我只管讲逻辑。
----我们假设下面的page按钮为page。图片宽度为imgWidth.-----
var index=0; //我们要先声明一个index来存储图片的序列
// 以下我用Jquery为例来书写，懒嘛。。。
page.click(function(){
index=page.index(this);
imgbox.animate({marginLeft:-index*imgWidth});
})
//以上代码出色的完成了左右的滚动轮播，快试试。。
//下面我们来整左右按钮,左按钮为prev，右为next
prev.click(function(){
if(index==0){
index= img.length-1;
}else{
index-=1;
}
imgbox.animate({marginLeft:-index*imgWidth});
});
//华丽的分割线
next.click(function(){
if(index==img.length-1){
index= 0;
}else{
index+=1;
}
imgbox.animate({marginLeft:-index*imgWidth});
})
//以上代码，明白了没？不明白跳楼，我们下面说自动播放
//自动播放，咱用setTimeout。不知道是啥翻文档去，别吐槽我。
var time = setTimeout(autoPlay,1000);
//每隔1000毫秒==1秒执行一次autoPlay
fuction autoPlay(){
if(index==img.length-1){
index= 0;
}else{
index+=1;
}
imgbox.animate({marginLeft:-index*imgWidth});
//以上代码有人发现和next.click一样。你可以写成个function或者直接获取next.click。这里就忍了。寡人懒。。。
time=setTimeout(autoPlay,1000);
//自己自身再次调用自己，并且赋值给time，注意时间也要是1000，以免看起来不和谐。
}
//写到这有些人吐槽，不能总自动吧，鼠标上去它得停啊
//别急，来了
overbox.hover(function(){
clearTimeout(time);
},function(){
time=setTimeout(autoPlay,1000);
})
//我们把事件写在overbox上，当鼠标经过焦点区域暂停，出去以后重新开始，循环到死。
so~~~一个简单的实例写完了，完成这个东东+跟你废话，用了我17分钟。
好吧。。今天到此为止，改天继续写。。欢迎把你还闹不明白的问题，反馈给我，我以后会尽力说道（如果我会）。
