JS原生轮播（JS篇）

来源：互联网发布：木旋全书淘宝网编辑：程序博客网时间：2024/05/17 21:06

接着上一篇，我接下来写关于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便不执行函数，这样我们在运动的时候就可以避免用户一直点击箭头
效果图
这里写图片描述

0 0