JS原生轮播（JS篇）

接着上一篇，我接下来写关于JS的部分，我会按照我当时的思路一步一步的写，在最后附上全部的代码
一开始我打算写最简单的图片切换功能，怎么写呢?当我们点击左右箭头的时候是用改变left的值，有了思路就很好写了

    //首先我们要获取我们需要的属性和id

    var prev=document.getElementById("prev")；
    var next=document.getElementById("next");
    var imgs=document.getElementById("contain_imgs");

    //之后我们要添加点击事件
    prev.onclick=function(){
        move(1024);
    }
    next.onclick=function(){
        move(-1024);
    }
    //我们将移动的方法写在move方法里
    function move(offset){
        var left=parseInt(imgs.style.left)+offset;
        imgs.style.left = left + 'px';//改变left的值
        //以下是判断图片如果变到第一个或最后一个时该如何做，图我方在下面
         if(parseInt(left)>-1024){
         imgs.style.left=-3072+"px";
            return;
        }
        if(parseInt(left)<-4096){
            imgs.style.left=-1024   +"px";
            return;
        }
    }

完成了这步，那下一步我们干什么呢？我准备做按钮，按钮的切换变色，和切换变图
也就是说我点了第一个按钮第一个按钮变成红色，表示我点击的，图片也切换到第一张，以此类推。
还有我点击箭头来切换图片时，我的按钮也跟着变色，一次这么多需要写那么该怎么写呢？

//首先我们先写最简单的，也就是当我们点击箭头来切换图片时下面的按钮会跟着变化，
//也就是说我们还需要向上面的click中写代码
var count=0;//用来定位按钮是第几个
var span=document.getElementsByTagName("span");//获取按钮
function showspan(){
        for(i=0;i<span.length;i++){
            if(span[i].className=='on')//一开始我们先消除带有on的，让所有按钮都没有
                span[i].className='';
        }
        span[count].className='on';之后根据计数，来锁定那个按钮需要加上on
    }
prev.onclick=function(){//这是左箭头的代码，右箭头的不再写了
        move(1024);
        if(count==0){//如果到头了，就回到最后一个
            count=3;
        }
        else
            count--;否则就减一
        showspan();
    }
//下一步，我们开始写按钮的点击事件
for (var i = 0; i < span.length; i++) {
        span[i].id=i;//先给每个按钮一个索引，方便定位
        span[i].onclick=function(){
            if(this.className=='on'){//如果点击的按钮本来就是选中的，则不做任何改变
            return;
            }
            index=this.id;//这里做一个计数器
            var offset=-1024*(index-count);//因为我们需要点按钮按钮便可以切换到相应的图片，所以
            //需要计算距离，也就是我们的偏移量，index代表我们点击图片的索引，count代表原来图片的索引
            move(offset);
            count=index;//我们再将图片索引重新定位到现在的位置
            showspan();
        }   

    }//这样我们按钮的就做完了

我们接下来就需要写自动播放功能，这个就简单多了，用定时器就可以

    var interval=3000;
    function play() {
                timer = setInterval(function () {
                    next.onclick();
                }, interval);
            }
    function stop() {
                clearInterval(timer);
            }

     contain.onmouseover = stop;//当鼠标移到图片上就停止移动
     contain.onmouseout = play;//移出就继续
        play();//执行函数

那么接下来便是最难的地方，便是动画效果，我们需要自己定义动画，也就是在之前的move函数中添加
动画效果

function move(offset){
        animated = true;//用来防止恶意点击动画的，最后来说
        var time = 1000;//设置动画总的时间
        var inteval = 10;//多长时间执行一次函数
        var speed = offset/(time/inteval);//我们是1024的宽，需要10步走完，就这个意思
        //相除便是速度，
        var left=parseInt(imgs.style.left)+offset;
        var amimate=function(){//动画部分

        if ( (speed > 0 && parseInt(imgs.style.left) < left) || (speed < 0 && parseInt(imgs.style.left) > left)) {//来判断我的动画是想往那边走，最多走一张图
                    imgs.style.left = parseInt(imgs.style.left) + speed + 'px';
                    //这就是动画在慢慢的加
                    setTimeout(amimate, inteval);//我们用递归一次次调用，直到if不成立
                }else{
                //如果不成立也就代表我们走完了一张图，
                    imgs.style.left = left + 'px';
                    if(parseInt(left)>-1024){
                    imgs.style.left=-3072+"px";
                        return;
                    }
                    if(parseInt(left)<-4096){
                    imgs.style.left=-1024   +"px";
                        return;
                    }
                     animated = false;
                }
        }

            amimate();
    }

完整代码

window.onload=function(){
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");
    var imgs=document.getElementById("contain_imgs");
    var span=document.getElementsByTagName("span");
    var count=0;
    var timer;
    var interval=3000;
    var animated = false;
    function move(offset){
        animated = true;
        var time = 1000;
        var inteval = 10;
        var speed = offset/(time/inteval);
        var left=parseInt(imgs.style.left)+offset;
        var amimate=function(){

        if ( (speed > 0 && parseInt(imgs.style.left) < left) || (speed < 0 && parseInt(imgs.style.left) > left)) {
                    imgs.style.left = parseInt(imgs.style.left) + speed + 'px';
                    setTimeout(amimate, inteval);
                }else{
                    imgs.style.left = left + 'px';
                    if(parseInt(left)>-1024){
                    imgs.style.left=-3072+"px";

                    }
                    if(parseInt(left)<-4096){
                    imgs.style.left=-1024   +"px";

                    }
                     animated = false;
                }
        }

            amimate();
    }
    function showspan(){
        for(i=0;i<span.length;i++){
            if(span[i].className=='on')
                span[i].className='';
        }
        span[count].className='on';
    }
    prev.onclick=function(){
        if (animated) {
              return;
            }
        move(1024);
        if(count==0){
            count=3;
        }
        else
            count--;
        showspan();
    }
    next.onclick=function(){
        if (animated) {
              return;
            }
        move(-1024);
        if(count==3){
            count=0;
        }
        else
            count++;
        showspan();
    }

    for (var i = 0; i < span.length; i++) {
        span[i].id=i;
        span[i].onclick=function(){
            if(this.className=='on'){
            return;
            }
            index=this.id;
            var offset=-1024*(index-count);
            move(offset);
            count=index;
            showspan();
        }   

    }
    function play() {
                timer = setInterval(function () {
                    next.onclick();
                }, interval);
            }
    function stop() {
                clearInterval(timer);
            }

     contain.onmouseover = stop;
     contain.onmouseout = play;
        play();
}

其中的anmiated，设置成flase这样我们在判断时如果是false便不执行函数，这样我们在运动的时候就可以避免用户一直点击箭头
效果图
这里写图片描述