实例——切换轮播

最新推荐文章于 2022-12-04 17:22:07 发布

のdestiny

最新推荐文章于 2022-12-04 17:22:07 发布

阅读量339

点赞数

分类专栏：实例文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/qq_42012745/article/details/122426595

版权

实例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ES5类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 350px;
            margin: 0 auto;
            position: relative;
        }
        .box {
            width: 600px;
            height: 350px;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
    <div class="box">

    </div>
    <script>
        function TransImg(containerEle,imgArr){
            this.containerEle = containerEle ;      //将容器元素变成这个类的属性，属性名为containerEle
            this.count = 0 ;
            this.w = parseInt(getStyle(this.containerEle,"width")); //获取容器元素的宽，赋值给类中属性名为w的
            this.h = parseInt(getStyle(this.containerEle,"height"));//获取容器元素的宽，赋值给类中属性名为h的
            this.arr = imgArr ;     //将传入的图片地址数组赋值给这个类中名为arr
            this.createImg();       //执行这个类中的创建图片元素的方法
            this.createPort();      //执行这个类中创建小圆点元素的方法
            this.createNP();        //执行这个类中创建上一页和下一页的方法
            this.chanPlay();        //执行手动切换轮播的方法
            this.autoPlay();        //执行自动轮播的方法
        }
        TransImg.prototype.createImg = function (){
            this.arr.forEach((item,key)=>{  //遍历图片地址的数组
                let imgEle = document.createElement("img");     //创建一个img元素
                imgEle.src = item ;                 //元素的图片地址等于数组中的地址
                imgEle.style.position = "absolute" ;    //图片为绝对定位
                if( key == 0 ){                     //如果图片是第一张图
                    imgEle.style.zIndex = 1 ;       //让第一张图呈现在最上面
                }
                imgEle.style.width = this.w + "px";     //图片的宽与容器元素的宽相等
                imgEle.style.height = this.h + "px";    //图片的高与容器元素的高相等
                imgEle.style.transition = "opacity 2s" ;    //切换轮播是透明度改变过渡
                this.containerEle.appendChild(imgEle);  //将图片放到容器中
            });
        }
        TransImg.prototype.createPort = function (){
            let divEle = document.createElement("div"); //首先创建小圆点盛放的容器盒子
            divEle.className = "portBox" ;  //盒子的类名为portBox
            divEle.style.position = "absolute" ;    //绝对定位
            divEle.style.width = "60%" ;        //为父元素的宽度的60%
            divEle.style.zIndex = 1 ;           //在最上层显示
            divEle.style.height = "20px" ;      //高度为20px
            divEle.style.bottom = "8%" ;        //距离底部为父元素的8%距离
            divEle.style.left = "50%" ;         //让盒子左右居中
            divEle.style.transform = "translateX(-50%)" ; //让盒子左右居中
            divEle.style.display = "flex" ;     //让盒子变成弹性盒子
            divEle.style.justifyContent = "space-evenly" ;//小圆点间隔对齐
            this.arr.forEach((item,key)=>{      //遍历图片数组
                let spanEle = document.createElement("span");//创建与数组元素个数相同的小圆点
                spanEle.style.width = "20px" ;  //小圆点宽20px
                spanEle.style.height = "20px" ; //小圆点高20px
                if( key == 0 ){                    //如果创建的是第一个圆点
                    spanEle.style.backgroundColor = "blue" ;    //则背景色是蓝色
                } else {
                    spanEle.style.backgroundColor = "white" ;   //否则背景色是白色
                }
                spanEle.style.borderRadius = "50%" ;        //将圆点变圆
                divEle.appendChild(spanEle);        //将小圆点放到小盒子中
            });
            this.containerEle.appendChild(divEle);  //将小盒子放到容器盒子中
        }
        TransImg.prototype.createNP = function (){
            let div1Ele = document.createElement("div");    //创建两个div元素
            let div2Ele = document.createElement("div");
            div1Ele.className = "next" ;        //第一个div元素className名为next，作为下翻页的时候使用
            div1Ele.innerHTML = ">" ;       //内容为》
            div1Ele.style.fontSize = "35px" ;//字体大小为35px
            div2Ele.className = "prev" ;    //第二个div元素className名为prev，作为上翻页
            div2Ele.innerHTML = "<" ;       //内容为《
            div2Ele.style.fontSize = "35px" ;   //字体大小为35px
            div1Ele.style.position = "absolute" ;   //两个div都是绝对定位的元素
            div2Ele.style.position = "absolute" ;
            div2Ele.style.left = "15px" ;   //一个距离左边15px
            div1Ele.style.right = "10px" ;  //一个距离右边10px
            div1Ele.style.top = "50%" ;     //上下都是相对父元素居中
            div2Ele.style.top = "50%" ; 
            div1Ele.style.transform = "translate(-50%)" ;//上下都是相对父元素居中
            div2Ele.style.transform = "translate(-50%)" ;
            div1Ele.style.zIndex = 1 ;  //都显示在层级最上面
            div2Ele.style.zIndex = 1 ;
            this.containerEle.appendChild(div1Ele) ; //将两个控制上下翻页的div元素添加到容器盒子中
            this.containerEle.appendChild(div2Ele) ;
        }
        TransImg.prototype.autoPlay = function (){
            let imgEles = this.containerEle.querySelectorAll("img");        //获取这个容器盒子中所有的img元素  图片
            let spanEles = this.containerEle.querySelectorAll("span");      //获取这个容器盒子中所有的span元素  小圆点
            const _that = this ;            //声明一个_that常量等于这个this
            let timer = setInterval(()=>{       //创建一个定时器
                _that.count ++ ;             //定时器启动的时候让  TransImg静态成员 count ++ 
                if( _that.count == _that.arr.length ){       //如果 TransImg类的静态成员count计数器等于图片数组的长度
                    _that.count = 0 ;                    //重新从0开始计数
                }
                imgEles.forEach((item,key)=>{               //遍历所有的图片元素
                    if( key == _that.count ){            //如果此时遍历的索引值key刚好等于此时计数器的值
                        item.style.opacity = 1 ;            //显示当前图片
                        spanEles[key].style.backgroundColor = "blue" ;  //改变当前图片对应的小圆点的背景色
                    } else {
                        item.style.opacity = 0 ;            //否则隐藏此时图片
                        spanEles[key].style.backgroundColor = "white" ; //当前图片对应的小圆点的背景色为默认颜色
                    }
                });
            },3500)             //3.5秒轮播一次
            this.containerEle.onmouseenter = function (){       //鼠标移入容器
                clearInterval(timer);                   //关闭定时器
            }   
            this.containerEle.onmouseleave = function (){           //鼠标移除定时器
                _that.autoPlay();                       //开启定时器
            }
        }
        TransImg.prototype.chanPlay = function (){
            let nextEle = this.containerEle.querySelector(".next");     //获取下翻页元素
            let prevEle = this.containerEle.querySelector(".prev");   //获取上翻页元素
            let imgEles = this.containerEle.querySelectorAll("img");        //获取所有图片
            let spanEles = this.containerEle.querySelectorAll("span");      //获取所有小圆点
            const _that = this ;                    //声明常量_that接收this
            nextEle.onclick = function (){          //点击下翻页
                _that.count ++ ;                 //静态成员计数器count++
                imgEles.forEach((item,key)=>{       //遍历img元素
                    item.style.opacity = 0 ;        //所有图片隐藏
                    spanEles[key].style.backgroundColor = "white" ; //所有小圆点背景色默认白色
                });
                if( _that.count == _that.arr.length){    //计数器值不能超出数组长度，每次计数器等于数组长度就重新计数
                    _that.count = 0 ;
                }
                imgEles[_that.count].style.opacity = 1 ;         //计数器对应的图片元素透明度为1，即为显示状态
                spanEles[_that.count].style.backgroundColor = "blue" ;   //计数器对应的小圆点背景色为蓝色
            }
            prevEle.onclick = function (){          //点击上翻页
                if( _that.count == 0 ){          //先判断计数器是否等于0 
                    _that.count = _that.arr.length ; //如果等于0让计数器的大小等于数组长度大小
                }
                _that.count -- ;                 //然后再执行--
                imgEles.forEach((item,key)=>{
                    item.style.opacity = 0 ; //所有图片隐藏
                    spanEles[key].style.backgroundColor = "white" ; //所有小圆点背景色默认白色
                });
                imgEles[_that.count].style.opacity = 1 ;//计数器对应的图片元素透明度为1，即为显示状态
                spanEles[_that.count].style.backgroundColor = "blue" ;//计数器对应的小圆点背景色为蓝色
            }
            spanEles.forEach((item,key)=>{      //遍历所有小圆点
                item.onclick = function (){     //当校园点被点击的时候
                    _that.count = key ;         //让计数器等于当前小圆点的索引值
                    spanEles.forEach((spanEle,index)=>{     //遍历所有小圆点
                        if( key == index ){         //如果当前的索引值和遍历的值相等，表示点击的小圆点刚好对应此时的图片和圆点
                            spanEle.style.backgroundColor = "blue" ;//小圆点的背景色为蓝色
                            imgEles[key].style.opacity = 1 ;    //图片显示
                        } else {
                            spanEle.style.backgroundColor = "white" ;   //否则小圆点的背景色为白色
                            imgEles[index].style.opacity = 0 ;  //图片隐藏
                        }
                    });
                }
            });
        }

        let containerEle = document.querySelector(".container");      //获取容器元素
        let boxEle = document.querySelector(".box");      //获取容器元素
        let imgArr = ["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg","./images/5.jpg"] ;   //声明一个数组，数组存放的轮播图所有图片的地址
       
        new TransImg(containerEle,imgArr);        //new一个TransImg类，传入容器元素和图片地址数组
        new TransImg(boxEle,imgArr);        //new一个TransImg类，传入容器元素和图片地址数组
        function getStyle(ele,styleName){       //封装一个获取样式兼容性的方法
            if(window.getComputedStyle){        //如果存在getComputedStyle，就返回这个方法获取的元素的样式
                return getComputedStyle(ele,"null")[styleName] ;
            } else {
                return ele.currentStyle[styleName] ; //否则就返回另外一个currentStyle方法的样式
            }
        }
    </script>
</body>
</html>

ES6类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 350px;
            margin: 0 auto;
            position: relative;
        }
        .box {
            width: 600px;
            height: 350px;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
    <div class="box">

    </div>
    <script>
        class TransImg{                     //创建一个TransImg类
            // static count = 0 ;              //声明一个静态变量count ，初始值为0
            constructor(containerEle,imgArr){          //构造器内需要传入2个参数，第一个为容器元素，第二个为图片的地址数组
                this.containerEle = containerEle ;      //将容器元素变成这个类的属性，属性名为containerEle
                this.count = 0 ;
                this.w = parseInt(getStyle(this.containerEle,"width")); //获取容器元素的宽，赋值给类中属性名为w的
                this.h = parseInt(getStyle(this.containerEle,"height"));//获取容器元素的宽，赋值给类中属性名为h的
                this.arr = imgArr ;     //将传入的图片地址数组赋值给这个类中名为arr
                this.createImg();       //执行这个类中的创建图片元素的方法
                this.createPort();      //执行这个类中创建小圆点元素的方法
                this.createNP();        //执行这个类中创建上一页和下一页的方法
                this.chanPlay();        //执行手动切换轮播的方法
                this.autoPlay();        //执行自动轮播的方法
            }
            createImg(){                //类中构造一个创建img元素的方法
                this.arr.forEach((item,key)=>{  //遍历图片地址的数组
                    let imgEle = document.createElement("img");     //创建一个img元素
                    imgEle.src = item ;                 //元素的图片地址等于数组中的地址
                    imgEle.style.position = "absolute" ;    //图片为绝对定位
                    if( key == 0 ){                     //如果图片是第一张图
                        imgEle.style.zIndex = 1 ;       //让第一张图呈现在最上面
                    }
                    imgEle.style.width = this.w + "px";     //图片的宽与容器元素的宽相等
                    imgEle.style.height = this.h + "px";    //图片的高与容器元素的高相等
                    imgEle.style.transition = "opacity 2s" ;    //切换轮播是透明度改变过渡
                    this.containerEle.appendChild(imgEle);  //将图片放到容器中
                });
            }
            createPort(){       //类中构造一个创建小圆点的方法
                let divEle = document.createElement("div"); //首先创建小圆点盛放的容器盒子
                divEle.className = "portBox" ;  //盒子的类名为portBox
                divEle.style.position = "absolute" ;    //绝对定位
                divEle.style.width = "60%" ;        //为父元素的宽度的60%
                divEle.style.zIndex = 1 ;           //在最上层显示
                divEle.style.height = "20px" ;      //高度为20px
                divEle.style.bottom = "8%" ;        //距离底部为父元素的8%距离
                divEle.style.left = "50%" ;         //让盒子左右居中
                divEle.style.transform = "translateX(-50%)" ; //让盒子左右居中
                divEle.style.display = "flex" ;     //让盒子变成弹性盒子
                divEle.style.justifyContent = "space-evenly" ;//小圆点间隔对齐
                this.arr.forEach((item,key)=>{      //遍历图片数组
                    let spanEle = document.createElement("span");//创建与数组元素个数相同的小圆点
                    spanEle.style.width = "20px" ;  //小圆点宽20px
                    spanEle.style.height = "20px" ; //小圆点高20px
                    if( key == 0 ){                    //如果创建的是第一个圆点
                        spanEle.style.backgroundColor = "blue" ;    //则背景色是蓝色
                    } else {
                        spanEle.style.backgroundColor = "white" ;   //否则背景色是白色
                    }
                    spanEle.style.borderRadius = "50%" ;        //将圆点变圆
                    divEle.appendChild(spanEle);        //将小圆点放到小盒子中
                });
                this.containerEle.appendChild(divEle);  //将小盒子放到容器盒子中
            }
            createNP(){
                let div1Ele = document.createElement("div");    //创建两个div元素
                let div2Ele = document.createElement("div");
                div1Ele.className = "next" ;        //第一个div元素className名为next，作为下翻页的时候使用
                div1Ele.innerHTML = ">" ;       //内容为》
                div1Ele.style.fontSize = "35px" ;//字体大小为35px
                div2Ele.className = "prev" ;    //第二个div元素className名为prev，作为上翻页
                div2Ele.innerHTML = "<" ;       //内容为《
                div2Ele.style.fontSize = "35px" ;   //字体大小为35px
                div1Ele.style.position = "absolute" ;   //两个div都是绝对定位的元素
                div2Ele.style.position = "absolute" ;
                div2Ele.style.left = "15px" ;   //一个距离左边15px
                div1Ele.style.right = "10px" ;  //一个距离右边10px
                div1Ele.style.top = "50%" ;     //上下都是相对父元素居中
                div2Ele.style.top = "50%" ; 
                div1Ele.style.transform = "translate(-50%)" ;//上下都是相对父元素居中
                div2Ele.style.transform = "translate(-50%)" ;
                div1Ele.style.zIndex = 1 ;  //都显示在层级最上面
                div2Ele.style.zIndex = 1 ;
                this.containerEle.appendChild(div1Ele) ; //将两个控制上下翻页的div元素添加到容器盒子中
                this.containerEle.appendChild(div2Ele) ;
            }
            autoPlay(){
                let imgEles = this.containerEle.querySelectorAll("img");        //获取这个容器盒子中所有的img元素  图片
                let spanEles = this.containerEle.querySelectorAll("span");      //获取这个容器盒子中所有的span元素  小圆点
                const _that = this ;            //声明一个_that常量等于这个this
                let timer = setInterval(()=>{       //创建一个定时器
                    _that.count ++ ;             //定时器启动的时候让  TransImg静态成员 count ++ 
                    if( _that.count == _that.arr.length ){       //如果 TransImg类的静态成员count计数器等于图片数组的长度
                        _that.count = 0 ;                    //重新从0开始计数
                    }
                    imgEles.forEach((item,key)=>{               //遍历所有的图片元素
                        if( key == _that.count ){            //如果此时遍历的索引值key刚好等于此时计数器的值
                            item.style.opacity = 1 ;            //显示当前图片
                            spanEles[key].style.backgroundColor = "blue" ;  //改变当前图片对应的小圆点的背景色
                        } else {
                            item.style.opacity = 0 ;            //否则隐藏此时图片
                            spanEles[key].style.backgroundColor = "white" ; //当前图片对应的小圆点的背景色为默认颜色
                        }
                    });
                },3500)             //3.5秒轮播一次
                this.containerEle.onmouseenter = function (){       //鼠标移入容器
                    clearInterval(timer);                   //关闭定时器
                }   
                this.containerEle.onmouseleave = function (){           //鼠标移除定时器
                    _that.autoPlay();                       //开启定时器
                }
            }
            chanPlay(){
                let nextEle = this.containerEle.querySelector(".next");     //获取下翻页元素
                let prevEle = this.containerEle.querySelector(".prev");   //获取上翻页元素
                let imgEles = this.containerEle.querySelectorAll("img");        //获取所有图片
                let spanEles = this.containerEle.querySelectorAll("span");      //获取所有小圆点
                const _that = this ;                    //声明常量_that接收this
                nextEle.onclick = function (){          //点击下翻页
                    _that.count ++ ;                 //静态成员计数器count++
                    imgEles.forEach((item,key)=>{       //遍历img元素
                        item.style.opacity = 0 ;        //所有图片隐藏
                        spanEles[key].style.backgroundColor = "white" ; //所有小圆点背景色默认白色
                    });
                    if( _that.count == _that.arr.length){    //计数器值不能超出数组长度，每次计数器等于数组长度就重新计数
                        _that.count = 0 ;
                    }
                    imgEles[_that.count].style.opacity = 1 ;         //计数器对应的图片元素透明度为1，即为显示状态
                    spanEles[_that.count].style.backgroundColor = "blue" ;   //计数器对应的小圆点背景色为蓝色
                }
                prevEle.onclick = function (){          //点击上翻页
                    if( _that.count == 0 ){          //先判断计数器是否等于0 
                        _that.count = _that.arr.length ; //如果等于0让计数器的大小等于数组长度大小
                    }
                    _that.count -- ;                 //然后再执行--
                    imgEles.forEach((item,key)=>{
                        item.style.opacity = 0 ; //所有图片隐藏
                        spanEles[key].style.backgroundColor = "white" ; //所有小圆点背景色默认白色
                    });
                    imgEles[_that.count].style.opacity = 1 ;//计数器对应的图片元素透明度为1，即为显示状态
                    spanEles[_that.count].style.backgroundColor = "blue" ;//计数器对应的小圆点背景色为蓝色
                }
                spanEles.forEach((item,key)=>{      //遍历所有小圆点
                    item.onclick = function (){     //当校园点被点击的时候
                        _that.count = key ;         //让计数器等于当前小圆点的索引值
                        spanEles.forEach((spanEle,index)=>{     //遍历所有小圆点
                            if( key == index ){         //如果当前的索引值和遍历的值相等，表示点击的小圆点刚好对应此时的图片和圆点
                                spanEle.style.backgroundColor = "blue" ;//小圆点的背景色为蓝色
                                imgEles[key].style.opacity = 1 ;    //图片显示
                            } else {
                                spanEle.style.backgroundColor = "white" ;   //否则小圆点的背景色为白色
                                imgEles[index].style.opacity = 0 ;  //图片隐藏
                            }
                        });
                    }
                });
            }
        }

        let containerEle = document.querySelector(".container");      //获取容器元素
        let boxEle = document.querySelector(".box");      //获取容器元素
        let imgArr = ["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg","./images/5.jpg"] ;   //声明一个数组，数组存放的轮播图所有图片的地址
       
        new TransImg(containerEle,imgArr);        //new一个TransImg类，传入容器元素和图片地址数组
        new TransImg(boxEle,imgArr);        //new一个TransImg类，传入容器元素和图片地址数组
        function getStyle(ele,styleName){       //封装一个获取样式兼容性的方法
            if(window.getComputedStyle){        //如果存在getComputedStyle，就返回这个方法获取的元素的样式
                return getComputedStyle(ele,"null")[styleName] ;
            } else {
                return ele.currentStyle[styleName] ; //否则就返回另外一个currentStyle方法的样式
            }
        }
    </script>
</body>
</html>