JS原生轮播（JS篇）

阳光穿透心脏的1/2处 2022-08-03 00:19 160阅读 0赞

接着上一篇，我接下来写关于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;
            }
        }

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

//首先我们先写最简单的，也就是当我们点击箭头来切换图片时下面的按钮会跟着变化，
    //也就是说我们还需要向上面的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();
            }   
    
        }//这样我们按钮的就做完了

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

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

完整代码

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

[20150728105032446]: /images/20220731/c9ede60f9c274a4ab07a7ea896fc1d28.png
[20150728113100314]: /images/20220731/bc3b5aeb2a384d69bd16a3b831df06cd.png
[20150728113152854]: /images/20220731/893d972df3db45a09e4ad2fd36cf37ba.png