原生JS实现轮播

Posted 2020-10-11 CodingPrince

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现轮播相关的知识，希望对你有一定的参考价值。

原生JS实现轮播特效

几乎在每个电商广告里都有轮播的影子，最近刚学了轮播，权当笔记；

原理：

先将要轮播的图片在一行中平铺，通过计算偏移量后改变这一行向左偏移的距离再利用定时器实现定时改变偏移量实现定时轮播。

轮播也有两种情况：加附属图片和不加附属图片，加附属图片使为了实现无缝轮播；

实现轮播的步骤：

1：编写html基本布局

2：编写css样式

样式关键：在容器中设置一个overflow:hidden；使其只能显示一张，多余的部分用隐藏起来

3：编写JS逻辑代码

（1）、先找到页面中的元素

（需要找到的页面元素：显示图片的容器、多张图片组成的列表、上一张和下一张的按钮、切换页面的小圆点等）

（2）、先实现上一张和下一张的手动轮播

（3）、实现小圆点的图片切换（小圆点主要通过index来获取是第几个）

（4）、加定时器实现自动轮播

（5）、代码和性能优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; padding: 0; text-decoration: none;}
        body { padding: 20px;}
        #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; 
　　　　　　　　　　font-size: 36px; font-weight: bold; width: 40px; height: 40px;  
　　　　　　　　　　position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>
    
</head>
<body>
<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
    <script type="text/javascript">
        //页面加载完了获取
        //获取页面中的每个元素
        window.onload = function (){
            //获取容器
            var container=document.getElementById("container");
            var list=document.getElementById("list");
            var buttons=document.getElementById("buttons").getElementsByTagName(‘span‘);
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");
            var index=1;//根据index的值亮小圆点
            var animated=false;//判断是否在动画
            var timer;

            function showButton(){
                for(var i=0;i<buttons.length;i++){
                    if(buttons[i].className==‘on‘){
                        buttons[i].className=‘‘;
                        break;
                    }
                }
                buttons[index-1].className=‘on‘;
            }

            //  滑块点击移动
            function animate(offset){
                animated=true;
                var newleft=parseInt(list.style.left)+offset;
                //移动时的时间等
                //调整页面的流畅度
                var time=300;//位移总时间
                var interval=10;//位移时间间隔
                var speed=offset/(time/interval);//每次的位移量
                //还需要判断什么时候位移
                function go() {
                    if((speed<0&& parseInt(list.style.left)>newleft)||(speed>0&& parseInt(list.style.left)<newleft)){
                        list.style.left=parseInt(list.style.left)+speed+"px";
                        setTimeout(go,interval);//interval时间后运行go函数，递归：实现animate的动画效果
                    }
                    else{
                        animated=false;
                        //作用：把left值归为正确的目标值
                        list.style.left=newleft+"px";

                        if(newleft>-600) list.style.left=-3000+‘px‘;
                        if(newleft<-3000) list.style.left=-600+‘px‘;
                    }
                }
                go();//必须调用一下go函数

            }


            //设置定时器
            function play(){
                timer=setInterval(function(){
                    next.onclick();
                },3000);

            }

            //停止定时器
            function stop(){
                clearInterval(timer);
            }

            //添加绑定事件,两边得滑块
            next.onclick=function(){
                //把px忽略掉
                if(index==5) index=1;
                else index+=1;
                showButton();
                if(!animated) {
                    animate(-600);
                }
            }
            prev.onclick=function (){
                //把px忽略掉
                if(index==1) index=5;
                else index-=1;
                showButton();
                if(!animated){
                    animate(600);
                }
            }

            //给每个按钮加上点击事件
            for(var i=0;i<buttons.length;i++){
                //需要计算偏移量
                buttons[i].onclick=function(){
                    //性能优化
                    if(this.className=="on"){
                        return   //不做任何事
                    }
                    //用来存放自身的index值
                    var myindex=parseInt(this.getAttribute(‘index‘));
                    var offset=-600*(myindex-index);
                    index=myindex;
                    showButton();
                    if(!animated){
                        animate(offset);
                    }
                }
            }
            container.onmouseover=stop;
            container.onmouseout=play;
            play();
        }
    </script>
</body>
</html>

我没有上传图片，网上找5张图片新建一个imgs文件夹存放就ok啦~~~本代码是根据慕课网js实现轮播课程仿写的代码~~

以上是关于原生JS实现轮播的主要内容，如果未能解决你的问题，请参考以下文章