前端学习时间不长，最近看完了第一遍高设，想着试着写一点东西，于是有了这个还不算好的轮播效果。（学习出处为慕课网）
实现过程
首先，应该清楚将要实现的功能，我实现的功能主要为：
- 鼠标滑过图片时左右两边的箭头出现，并且鼠标放在箭头上时箭头透明度降低
- 点击左右箭头实现图片无限轮播
- 图片下方圆点按钮会随着图片轮播而变化
- 点击任意圆点按钮，图片能正确定位到相关位置
- 鼠标移出图片时，图片按照一定时间间隔自动轮播，鼠标放入图片时，暂停自动播放
接下来就是实现各个功能：
1、鼠标滑过效果
鼠标滑过效果可以直接通过伪类选择符hover实现
.arrow{
cursor: pointer;//鼠标放入箭头时显示为小手的形状
display: none;//鼠标未滑入图片时，不显示效果
line-height: 40px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;
position: absolute;//说明以父容器为定位基准
z-index: 2;//此标签说明本部分与其他部分相比更靠近人
top: 180px;background-color:#000;
opacity: 0.3; //设置箭头出现的透明度
color:#fff;
}
在鼠标滑过箭头时只需要改变箭头的透明度
.arrow:hover{
opacity: 0.7;
}
由于之前定义了display: none;，所以现在要将其显示出来
#carousel:hover .arrow{
display: block;
}
2、点击箭头实现轮播
通过观察控制台可以发现，在进行图片轮播时，改变的其实是图片left:00px的值，也就是说只要能有一个函数，在鼠标点击箭头时准备定位此时图片的left值，就能实现图片的切换。
function animate(offset){
var left = parseInt(picture.style.left) + offset;
picture.style.left = left + 'px';
}
next.onclick = function() {
animate(-600px);//点击右箭头
}
prev.onclick = function() {
animate(600px);//点击左箭头
}
但是上述方法不能实现无限滚动的效果，也就是说鼠标一直往一个方向点击时，会出现空白页，所以进行以下优化：
在图片轮播到第一张后再次点击箭头，图片的left值将会变大，也就是说如果想要从第一张跳转到最后一张，可以加上最后一张的附属图，并将它的left值变为最后一张图的left值，从而实现跳转。
function animate(offset){
var left = parseInt(picture.style.left) + offset;
if (left >-600) {
picture.style.left = -3000 + 'px';
}
if (left <-3000) {
picture.style.left = -600 + 'px';
}
}
3、点击圆点按钮实现图片切换
每一个按钮都设置了一个index值，用来显示图片序号。首先要实现圆点点亮功能。
在css定义了一个圆点亮起的效果：
#button .on{
background: #fff;
}
定义一个方法来点亮圆点：
function showbutton(){
for (var i = 0; i<button.length; i++) {//遍历圆点
if (button[i].className == 'on') {//如果遍历到的圆点亮着，则去掉，防止圆点一起亮起
button[i].className='';
break;
}
}
button[index-1].className='on';//将当前按钮变为亮着
}
prev.onclick=function(){
if (index == 1) {//如果没有此判断，index值将会一直减小，如果当前index为1，说明是第一个按钮，下一个按钮的index值为5
index = 5;
}
else{
index -= 1;
}
showbutton();
animate(600);
}
现在要实现圆点按钮的任意切换，此时图片切换的原理与上述箭头切换一样，都是通过偏移量来进行切换，此时是通过index的值进行切换。
for (var i = 0; i < button.length; i++) {
button[i].onclick = function(){
if (this.className == 'on') {
return;//跳出函数，当点击当前页面的按钮时，不进行for循环
}
var newindex = parseInt(this.getAttribute('index'));//获取目标值
var offset = -600 * (newindex - index);
animate(offset);
index = newindex;
showbutton();//点击后需要显示按钮
}
4、设置图片切换速度，CSS3有一个过渡属性transition属性，但这个属性不能用在这里，试过之后可以发现图片切换的顺序实际上是123454321，而我们要的效果是1234512345，所以这里需要使用js。本效果使用setTimeout()方法来实现，每隔10ms,执行一次go()。
function animate(offset){
if(offset == 0){
return;
}
animated = true;
var time =300;
var interval = 10;//图片切换一下的时间
var speed = offset/(time/interval);//设置图片的切换速度
var left = parseInt(picture.style.left) + offset;
var go = function(){
if ((speed > 0 && parseInt(picture.style.left) < left) || (speed < 0 && parseInt(picture.style.left) > left)) {
picture.style.left = parseInt(picture.style.left) + speed +'px';
setTimeout(go,interval);
}
else{
picture.style.left = left +'px';
if(left>-200){
picture.style.left = -600 * len + 'px';
}
if (left<(-600 *len)) {
picture.style.left = '-600px';
}
animated = false;
}
}
go();
}
5、实现自动切换
自动切换使用了定时器，在一个时间间隔里，执行点击右箭头的方法。
function play(){
var timer = setTimeout(function(){
next.onclick();
play();
},interval);
}
在鼠标放在图片上时，自动切换暂停，因此需要清楚定时器。
function stop(){
clearTimeout(timer);
}
最后通过以下方式，实现此功能：
carousel.onmouseover = stop;
carousel.onmouseout = play;
play();
学习心得
虽然成功实现了轮播效果，但是在代码优化上还有很多需要改进的地方。目前还处于前端小白阶段，希望在接下来的学习中能有所提高。
（本文可能存在很多漏洞，希望众大神能批评指出，感谢！）
个人主页
