轮播图第二代（已封装）

最新推荐文章于 2024-09-16 06:30:00 发布
@全体人员
最新推荐文章于 2024-09-16 06:30:00 发布
阅读量125
点赞数 2
分类专栏：前端文章标签：前端 html javascript
本文链接：https://blog.csdn.net/qq_43228610/article/details/126546290
版权
前端专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <!--
   @作者：@全体人员
   @时间：2022-08-25 13:49:53
   @功能：
   -->
    <style>
        .tim-view{
            width: 600px;
            height: 300px;
            border-radius: 10px;
        }
    </style>
    <meta charset="UTF-8">
    <title>轮播图(封装)</title>
</head>
<body>
    <div id="vi" class="tim-view">
        <img src="imgs1/img.png">
        <img src="imgs1/img_1.png">
        <img src="imgs1/img_2.png">
        <img src="imgs1/img_3.png">
        <img src="imgs1/img_4.png">
        <img src="imgs1/img.png">
        <img src="imgs1/img_1.png">
        <img src="imgs1/img_2.png">
        <img src="imgs1/img_3.png">
        <img src="imgs1/img_4.png">
    </div>
<script>
    //两种方法调用 1传配置对象 2传视图id
    let config={
        id:"vi",
        timeDelay:400,
        timeFastDelay:200,
        timeSpace:10,
        timeDelayMax:405,
        intervalTime:3000,
        backConfig:false,
        pointConfig:true,
        buttonConfig:true
    }
    //createSwiper('vi');
    createSwiper(config);
    function createSwiper(config){
        //元素id
        let elementId;
        //当前页数
        let nowPages=0;
        //正常动画时间，需要与过渡动画的时间一致或者适当大些。
        let timeDelay=400;
        //加速动画时间，需要与过渡的时间保持一致或者更大些。
        let timeFastDelay=200;
        //使得计时器隔开不冲突,如果冲突导致图片显示不正常可以调高该数值。
        let timeSpace=10;
        //节流器的时间设置，可以与过渡时间一样，但是最好比它大一点。
        let timeDelayMax=timeDelay+5;
        //定时器
        let timer=null;
        //定时滚动时间
        let intervalTime=3000;
        //配置是否将第一张图设置为背景图，前提是第一张是img且src属性是图片。
        let backConfig=false;
        //配置是否需要下面的小点点
        let pointConfig=true;
        //配置两边的按钮
        let buttonConfig=true;
        //初始化参数
        if(typeof config=='object'){
            initData(config);
        }else {
            elementId=config;
        }
        if(!elementId){
            throw "没有指定视图元素，请添加视图元素的id";
        }
        let view=document.getElementById(elementId);
        if(!view){
            throw "找不到指定的元素!";
        }
        let imgs=Array.from(document.getElementById(elementId).children);
        let points=new Array();
        let viewWidth=view.clientWidth;
        //生成唯一类名
        let className="item-fast"+(new Date()).valueOf();
        init();
        function initData(configObj){
            if(configObj.id){
                elementId=configObj.id;
            }
            if(configObj.timeDelay){
                timeDelay=configObj.timeDelay;
            }
            if(configObj.timeFastDelay){
                timeFastDelay=configObj.timeFastDelay;
            }
            if(configObj.timeSpace){
                timeSpace=timeSpace;
            }
            if(configObj.timeDelayMax){
                timeDelayMax=configObj.timeDelayMax;
            }
            if(configObj.intervalTime){
                intervalTime=configObj.intervalTime;
            }
            if(configObj.backConfig || configObj.backConfig===false){
                backConfig=configObj.backConfig;
            }
            if(configObj.pointConfig || configObj.pointConfig===false){
                pointConfig=configObj.pointConfig;
            }
            if(configObj.buttonConfig || configObj.buttonConfig===false){
                buttonConfig=configObj.buttonConfig;
            }
        }
        function init(){
            let viewHeight=view.clientHeight;
            if(viewWidth==0 || viewHeight==0){
                return;
            }
            console.log(viewHeight,viewWidth)
            if(imgs.length<3){
                return;
            }
            //添加全局类名到style里面
            let style=document.querySelectorAll("head>style")[0];
            if(!style){
                let head=document.querySelectorAll("head")[0];
                if(!head){
                    throw "你的网页连head头都没有!";
                }
                let st=document.createElement("style");
                head.appendChild(st);
                style=st;
            }
            //初始化css
            let styleText=".tim-com{position: relative !important;overflow: hidden !important;user-select: none;}";
            styleText+=".tim-item{width: 100%;height: 100%;display: inline-block;position: absolute;left:0;top:0;transition-timing-function: ease-in-out;}\n";
            styleText+=".tim-but{width: 100%;height: 30px;position: absolute;text-align: center;bottom: 0;}\n";
            styleText+=".tim-point{display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: #888;cursor: pointer;margin: 2px;}\n";
            styleText+=".tim-but-select{background-color: blue;}\n";
            styleText+=".tim-but-icon{display: inline-block;width: 25px;height: 25px;line-height: 25px;text-align: center;color: white;top:50%;border-radius: 50%;position: absolute;background-color: rgba(219,151,151,0.3);margin: 0 5px;cursor: pointer;}\n";
            styleText+=".tim-but-icon:hover{background-color: rgba(219,151,151,0.8);}\n";
            styleText+=".tim-but-right{right: 0;}\n";
            styleText+=".tim-item-none{transition: all 0s !important;}";
            style.innerHTML=style.innerHTML+styleText;
            let classCont="."+className+"{transition: all "+timeFastDelay/1000+"s !important;}\n";
            style.innerHTML=style.innerHTML+classCont;
            view.classList.add("tim-com");
            //初始化
            for(let i=0;i<imgs.length;i++){
                imgs[i].classList.add("tim-item");
                imgs[i].style.left=viewWidth*(i-1)+"px";
                imgs[i].addEventListener("mouseenter",pauseInterval);
                imgs[i].addEventListener("mouseleave",startInterval);
                imgs[i].style.transition="all "+timeDelay/1000+"s";
            }
            //设置背景图片，防止遇到卡顿，直接无显示的状态。
            if(backConfig){
                if(imgs[0].src){
                    view.style.backgroundImage="url("+imgs[0].src+")";
                    view.style.backgroundSize=""+viewWidth+"px"+" "+viewHeight+"px";
                }
            }
            if(pointConfig){
                let but=document.createElement("div");
                but.className="tim-but";
                //添加小点点
                for(let i=0;i<imgs.length;i++){
                    let point=document.createElement("span");
                    point.className="tim-point";
                    point.addEventListener("click",delayStrike(i));
                    point.addEventListener("mouseenter",pauseInterval);
                    point.addEventListener("mouseleave",startInterval);
                    if(i==0){
                        point.classList.add("tim-but-select");
                    }
                    points.push(point);
                    but.appendChild(point);
                }
                view.appendChild(but);
            }
            if(buttonConfig){
                //添加左边按钮
                let element=document.createElement("div");
                element.classList.add("tim-but-icon");
                element.innerText="<";
                element.addEventListener("click",delayStrike(-1));
                element.addEventListener("mouseenter",pauseInterval);
                element.addEventListener("mouseleave",startInterval);
                view.appendChild(element);
                //添加右边按钮
                element=document.createElement("div");
                element.classList.add("tim-but-icon");
                element.classList.add("tim-but-right");
                element.innerText=">";
                element.addEventListener("click",delayStrike(-2));
                element.addEventListener("mouseenter",pauseInterval);
                element.addEventListener("mouseleave",startInterval);
                view.appendChild(element);
            }
            //开启定时器
            startInterval();
        }
        function pauseInterval(){
            clearInterval(timer);
        }
        function startInterval(){
            timer=setInterval(()=>{
                delayStrike(-2)();
            },intervalTime);
        }
        function delayStrike(x){
            //节流
            let timerDelay=null;
            return function() {
                if(timerDelay) return;
                if(x==-1){
                    moveRight();
                }else if(x==-2) {
                    moveLeft();
                }else{
                    locationPoint(x);
                }
                timerDelay=setTimeout(()=>{
                    clearTimeout(timerDelay);
                    timerDelay=null;
                },timeDelayMax);
            }
        }
        function addPointColor(x){
            //给小点点加颜色
            for(let i=0;i<points.length;i++){
                points[i].classList.remove("tim-but-select");
            }
            if(points[x]){
                points[x].classList.add("tim-but-select");
            }
        }
        function locationPoint(x){
            //点小点点
            if(x-nowPages>0){
                moveRange(x-nowPages,1);
            }else {
                moveRange(nowPages-x,-1);
            }
        }
        function moveRange(range,direction){
            //控制方向、距离
            let temp=0;
            for(let i=0;i<range;i++){
                setTimeout(()=>{
                    if(direction>0){
                        for (let k=1;k<=2;k++){
                            imgs[k].classList.add(className);
                        }
                        moveLeft(timeFastDelay);
                    }else {
                        for (let i=0;i<2;i++){
                            imgs[i].classList.add(className);
                        }
                        moveRight(timeFastDelay);
                    }
                },(timeFastDelay+timeSpace)*i);//+timeSpace使得计时器隔开不冲突。
            }
        }
        function moveLeft(time=timeDelay){
            //向左移动
            for (let i=3;i<imgs.length;i++){
                imgs[i].classList.add("tim-item-none");
            }
            imgs[0].classList.add("tim-item-none");
            imgs[0].style.left=(viewWidth*(imgs.length-2))+"px";
            for(let i=1;i<imgs.length;i++){
                let left=imgs[i].style.left;
                left.replaceAll("p","");
                left.replaceAll("x","");
                left=parseInt(left)-viewWidth;
                imgs[i].style.left=left+"px";
            }
            setTimeout(()=>{
                for (let k=1;k<=2;k++){
                    imgs[k].classList.remove(className);
                }
                for (let i=3;i<imgs.length;i++){
                    imgs[i].classList.remove("tim-item-none");
                }
                imgs[0].classList.remove("tim-item-none");
                moveLeftArr();
            },time);
            nowPages=(nowPages+1)%imgs.length;
            addPointColor(nowPages);
        }
        function moveLeftArr(){
            //数组转换
            let img=imgs[0];
            for(let i=1;i<imgs.length;i++){
                imgs[i-1]=imgs[i];
            }
            imgs[imgs.length-1]=img;
        }
        function moveRight(time=timeDelay){
            //给其他的图片加瞬变动画
            for (let i=2;i<imgs.length;i++){
                imgs[i].classList.add("tim-item-none");
            }
            imgs[imgs.length-1].style.left=-viewWidth+"px";
            for(let i=imgs.length-2;i>=0;i--){
                let left=imgs[i].style.left;
                left.replaceAll("p","");
                left.replaceAll("x","");
                left=parseInt(left)+viewWidth;
                imgs[i].style.left=left+"px";
            }
            nowPages--;
            if(nowPages<0){
                nowPages=imgs.length-(-nowPages);
            }
            addPointColor(nowPages);
            setTimeout(()=>{
                for (let i=0;i<2;i++){
                    imgs[i].classList.remove(className);
                }
                for (let i=2;i<imgs.length;i++){
                    imgs[i].classList.remove("tim-item-none");
                }
                moveRightArr();
            },time);
        }
        function moveRightArr(){
            let img=imgs[imgs.length-1];
            for(let i=imgs.length-1;i>=1;i--){
                imgs[i]=imgs[i-1];
            }
            imgs[0]=img;
        }
    }
</script>
</body>
</html>