JS实现轮播

前端学习时间不长，最近看完了第一遍高设，想着试着写一点东西，于是有了这个还不算好的轮播效果。（学习出处为慕课网）

实现过程

首先，应该清楚将要实现的功能，我实现的功能主要为：

• 鼠标滑过图片时左右两边的箭头出现，并且鼠标放在箭头上时箭头透明度降低
• 点击左右箭头实现图片无限轮播
• 图片下方圆点按钮会随着图片轮播而变化
• 点击任意圆点按钮，图片能正确定位到相关位置
• 鼠标移出图片时，图片按照一定时间间隔自动轮播，鼠标放入图片时，暂停自动播放

接下来就是实现各个功能：
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();

学习心得

虽然成功实现了轮播效果，但是在代码优化上还有很多需要改进的地方。目前还处于前端小白阶段，希望在接下来的学习中能有所提高。
（本文可能存在很多漏洞，希望众大神能批评指出，感谢！）
个人主页