JS完成轮播图(全部JS代码,自动轮播)

需求
1、点击左右方向图标切换图片
2、点击图片中的小圆点切换对应图片
3、切换图片改变对应小圆点的颜色
4、鼠标离开时自动轮播,鼠标滑入停止轮播
5、不能有空白
在这里插入图片描述

思路:
1、先布局,创建轮播图显示区域,容器
2、创建放图片的盒子,放入容器,并创建图片放入盒子,显示第一张,并将所有图片存到数组
3、创建左右按钮,添加至容器内,将左右按钮存到数组
4、创建小圆点放入容器,将小圆点存到数组
上面4个步骤就把轮播图布局完成了(如上图),下面该加效果了
5、给左右按钮添加点击事件,点击右边按钮时,当前图片下标+1,并把方向设置为向左运动,如果大于图片地址数量-1时
让他回到第一张图片,设置下标为0
点击左边按钮时,当前图片下标-1,并把方向设置为向右运动,如果小于0,就让他为当前图片地址数量-1,也就是最后一张图片
6、给小圆点设置点击事件,先获取点击圆点的下标,如果点击元素下标大于当前显示图片下标时,设置方向向左运动,
反之设置向右运动,并且把点击元素下标赋值给当前图片下标
7、设置函数,如果方向向右运动时,在当前图片前面插入一张图片,但是还是显示当前图片,方向向左运动时,在后面
插入一张图片,还是显示当前图片,并且打开开关,让图片轮播
8、设置轮播函数,方向向左运动时,切换下一张图片,并且把第一张图片删除,方向向右运动时,切换前一张图片,删除
当前图片
9、设置小圆点切换的颜色
10、设置自动轮播,给容器添加鼠标进入离开事件,设置一个开关,鼠标进入时停止轮播,鼠标离开自动轮播

下面为JS完整代码

//定义变量
var imgCon,ul,preDot;
        var imgList=[],
            dotList=[],
            bnList=[],
            time=200,
            autoBool=false;
            bool=false,
            pos=0,
            x=0,
            direction="",
            imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"];
        const WIDTH=1680;
        const HEIGHT=560;
        const SPEED=50;
        const LEFT=Symbol();
        const RIGHT=Symbol();

        init();
        function init(){
        //创建轮播图显示区域,容器
            var carousel=ce("div",{
                width:WIDTH+"px",
                height:HEIGHT+"px",
                margin:"auto",
                position:"relative",
                overflow:"hidden"
            })
            //创建放图片的盒子,并放入容器中
            createImgCon(carousel);
            //创建左右按钮,并放入容器
            createBn(carousel);
            //创建小圆点,并放入容器
            createDot(carousel);
            document.body.appendChild(carousel);
            ul.style.left=(WIDTH-ul.offsetWidth)/2+"px"
            setInterval(animation,16);
            carousel.addEventListener("mouseenter",mouseHandler);
            carousel.addEventListener("mouseleave",mouseHandler);
            changeDot();
        }

        function mouseHandler(e){
            if(e.type==="mouseenter"){
                autoBool=false;
                time=200;
            }else if(e.type==="mouseleave"){
                autoBool=true;
            }
        }

        function ce(type,style){
            var elem=document.createElement(type);
            Object.assign(elem.style,style);
            return elem;
        }

        function createImgCon(parent){
            imgCon=ce("div",{
                width:2*WIDTH+"px",
                height:HEIGHT+"px",
                position:"absolute",
                left:0
            });
            for(var i=0;i<imgSrcList.length;i++){
                var img=ce("img",{
                    width:WIDTH+"px",
                    height:HEIGHT+"px"
                })
                img.src=imgSrcList[i];
                imgList.push(img);
            }
            imgCon.appendChild(imgList[0]);
            parent.appendChild(imgCon);
        }

        function createBn(parent){
            var arr=["left","right"];
            for(var i=0;i<arr.length;i++){
                var img=ce("img",{
                    position:"absolute",
                    top:(HEIGHT-60)/2+"px",
                    left:i===0 ? "50px" : "none",
                    right:i===1 ? "50px" : "none"
                })
                img.src=`./img/${arr[i]}.png`;
                bnList.push(img);
                parent.appendChild(img);
                img.addEventListener("click",bnClickHandler); 
            }        
        }

        function bnClickHandler(e){
            if(bool) return;
            if(e.target.src.includes("left.png")){
                pos--;
                if(pos<0) pos=imgSrcList.length-1;
                direction=RIGHT;
            }else{
                pos++;
                if(pos>imgSrcList.length-1) pos=0;
                direction=LEFT;
            }
            changeDot();
            createNextImg();
        }

        function createNextImg(){
            if(direction===RIGHT){
                imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
                imgCon.style.left=-WIDTH+"px";
                x=-WIDTH;
            }else if(direction===LEFT){
                imgCon.appendChild(imgList[pos]);
                x=0;
            }
            bool=true;
        }

        function createDot(parent){
            ul=ce("ul",{
                listStyle:"none",
                margin:0,
                padding:0,
                position:"absolute",
                bottom:"50px",
            })
            for(var i=0;i<imgSrcList.length;i++){
                var dot=ce("li",{
                    width:"40px",
                    height:"40px",
                    border:"2px solid red",
                    borderRadius:"50%",
                    float:"left",
                    marginLeft:i===0 ? "0px" : "20px"
                })
                ul.appendChild(dot);
                dotList.push(dot);
            }
            parent.appendChild(ul);
            ul.addEventListener("click",dotClcikHandler);
        }
        
        function dotClcikHandler(e){
            if(bool) return;
            if(e.target.constructor!==HTMLLIElement) return;
            var index=dotList.indexOf(e.target);
            if(index===pos) return;
            direction=index>pos ? LEFT : RIGHT;
            pos=index;
            changeDot();
            createNextImg();
        }
		
        function animation(){
            imgConMove();
            autoPlay();
        }
        //切换小圆点颜色
        function changeDot(){
            if(preDot) preDot.style.backgroundColor="rgba(255,0,0,0)";
            preDot=dotList[pos];
            preDot.style.backgroundColor="rgba(255,0,0,0.5)";
        }
		//控制放图片盒子的移动
        function imgConMove(){
            if(!bool) return;
            if(direction===LEFT){
                x-=SPEED;
                if(x<=-WIDTH){
                    imgCon.firstElementChild.remove();
                    x=0;
                    bool=false;
                    }
                    imgCon.style.left=x+"px";
                }
                else if(direction===RIGHT){
                    x+=SPEED;
                    if(x>=0){
                        imgCon.lastElementChild.remove();
                        x=0;
                        bool=false;
                    }
                   imgCon.style.left=x+"px";
            }
        }
        //自动轮播
        function autoPlay(){
            if(!autoBool) return;
            time--;
            if(time>0) return;
            time=200;
            var evt=new MouseEvent("click");
            bnList[1].dispatchEvent(evt);
        }
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页