js面向对象写轮播图

最新推荐文章于 2022-08-12 11:10:34 发布
最新推荐文章于 2022-08-12 11:10:34 发布
阅读量490 收藏 1
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108508454
版权

面向对象轮播图

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .carousel1 {
            margin: 100px auto;
            width: 600px;
            height: 400px;
        }
        
        .carousel2 {
            margin: 100px auto;
            width: 300px;
            height: 200px;
        }
    </style>

</head>

<body>
    <div class="carousel1"></div>
    <div class="carousel2"></div>
    <script src="./loop.js"></script>
    <script>
		//获取两个存放轮播图的容器
        var carousel1 = document.querySelector('.carousel1')
        var carousel2 = document.querySelector('.carousel2')
		//存放数组的代码
        var imgArr = ['./images/1.jpeg', './images/2.jpeg', './images/3.jpeg', './images/4.jpeg', './images/5.jpeg', './images/6.jpeg'];
        //创建实例对象
        var l1 = new Loop(carousel1, imgArr);
        var l2 = new Loop(carousel2, imgArr);
        // l1.create();
        // l1.addStyle();
        // l1.addEvent();
    </script>
</body>

</html>

var Loop = (function() {	
	//运动函数
    function animate(dom, targetObject, duration, callback) {
        // 参数默认值
        duration = duration || 1000;
        // 1 定义起点 
        var nowObject = {};
        // 获取计算后样式对象
        var styleObject = window.getComputedStyle(dom);
        // 因为targetObject是对象 所以通过循环得到该对象的每一个属性名
        for (var i in targetObject) {
            // 获取对应的属性
            var prop = styleObject[i];
            // 为了确保能够计算 需要转为数字
            nowObject[i] = parseInt(prop);
        }
        // nowObject在循环之后就拥有了targetObjet的所有属性 并且属性值为运动之前的值
        // console.log(nowObject);
        // 2 定义总距离
        var distanceObject = {};
        for (var i in targetObject) {
            // 总距离 = 终点值 - 初始值
            distanceObject[i] = targetObject[i] - nowObject[i];
        }
        // 3 定义间隔
        var interval = 20;
        // 4 定义总次数
        var allCount = duration / interval;
        // 5 定义计数器
        var count = 0;
        // 开启定时器
        var timer = setInterval(function() {
            // 计数器累加
            count++;
            // 改变每一条属性 
            for (var i in targetObject) {
                if (i === "opacity") {
                    dom.style[i] = (nowObject[i] + count * distanceObject[i] / allCount);
                } else {
                    dom.style[i] = (nowObject[i] + count * distanceObject[i] / allCount) + "px";
                }
            }
            // 判定是否停止
            if (count >= allCount) {
                // 停止定时器
                clearInterval(timer);

                // if (callback) {
                //     callback();
                // }
                // 短路语法：且运算 有假就假 都真才真
                // 当不传递callback时 为undefined  则&&后面的语句不会被执行 
                // 当传递callback时  为函数 函数为真 就执行了
                callback && callback();

                // 强行拉到终点去
                // for (var i in targetObject) {
                //     if (i === "opacity") {
                //         dom.style[i] = targetObject[i];
                //     } else {
                //         dom.style[i] = targetObject[i] + "px";
                //     }
                // }
            }
        }, interval);
    };
	//创建构造函数
    function Loop(container, imgArr) {
    	//得到存放轮播图的容器
        this.container = container;
        //得到存放数组的数组
        this.imgArr = imgArr;
        //创建轮播图片的ul
        this.imgUl = document.createElement('ul');
        //创建按钮的框
        this.btnContainer = document.createElement('div');
        //创建左右按钮
        this.leftBtn = document.createElement('span');
        this.rightBtn = document.createElement('span');
        //创建小圆点的ul
        this.pointUl = document.createElement('ul');
        //创建存放图片li的数组
        this.imgLi = [];
        //创建存放图片li中img的数组
        this.imgDetail = [];
        //创建存放小圆点的数组
        this.pointLi = [];
        //创建存放ul位置的数组
        this.count = 0;
        //创建标志位锁
        this.flag = true;
        //创建存放定时器的变量
        this.time;
        //初始化各个函数
        this.init();
    }
    Loop.prototype = {
        constructor: Loop,
        init() {
            this.create();
            this.addStyle();
            this.addEvent();
        },
        //构建架构
        create() {
            //创造轮播图片的ul
            this.createImgUl();
            //创建左右按钮
            this.createBtn();
            //创建小圆点的结构
            this.createPointUl();
        },
		//创建ul里面的li
        createImgUl() {
        	//根据图片数组中有多少个图片生成相应数量的li
            this.imgArr.forEach(((item, index) => {
            		//创建li
                    var li = document.createElement('li');
                    //创建img
                    var img = document.createElement('img');
                    //赋予地址
                    img.src = item;
                    //将img存放到li中
                    li.appendChild(img);
                    //将创建的li存放到imgLi数组中
                    this.imgLi.push(li);
                    //将创建的图片存放到图片的数组中
                    this.imgDetail.push(img);
                    //将创建的li存放到ul中
                    this.imgUl.appendChild(li);
                    //将ul存放到容器中
                    this.container.appendChild(this.imgUl);
                }))
                // console.log(this.imgLi);
                //复制第一个li
            var li = this.imgLi[0].cloneNode(true);
            //将复制的li也存放到数组中
            this.imgLi.push(li);
            //将复制的li中的图片也存放到图片数组中
            this.imgDetail.push(li.children[0]);
            // console.log(li);
            //将复制的li放到ul里面
            this.imgUl.appendChild(li);
        },
        createBtn() {
        	//将左右按钮存放到存放按钮的容器中
            this.btnContainer.appendChild(this.leftBtn);
            this.btnContainer.appendChild(this.rightBtn);
            //将存放按钮的容器存放到容器中
            this.container.appendChild(this.btnContainer);
        },
        createPointUl() {
        //根据图片有多少张创建小圆点
            this.imgArr.forEach((item) => {
                var li = document.createElement('li');
                this.pointLi.push(li);
                this.pointUl.appendChild(li);
            });
            // console.log(this.pointLi);
            this.container.appendChild(this.pointUl);
        },
        //添加样式
        addStyle() {
        	//大盒子给相对定位
            this.container.style.position = 'relative';
            //添加大图的样式
            this.imgUlStyle();
            //添加按钮的样式
            this.BtnStyle();
            //添加小圆点的样式
            this.pointStyle();
        },
        imgUlStyle() {
        	//容器部分超出隐藏
            this.container.style.overflow = 'hidden'
            //给ul添加样式
            imgUl = {
                width: this.container.clientWidth * (this.imgLi.length) + 'px',
                height: this.container.clientHeight * this.imgLi.length + 'px',
                listStyle: 'none',
                // display: 'flex',
                position: 'absolute',
                // overflow: 'hidden'
            };
            for (var i in imgUl) {
                this.imgUl.style[i] = imgUl[i];
            };
            //给每个li都添加样式
            this.imgLi.forEach((item) => {
                item.style.height = this.container.clientHeight + 'px';
                item.style.width = this.container.clientWidth + 'px';
                item.style.float = 'left';
            });
            // console.log(this.imgDetail);
            //给li中的每个图片添加样式
            this.imgDetail.forEach((item) => {
                item.style.height = this.container.clientHeight + 'px';
                item.style.width = this.container.clientWidth + 'px';
            })
        },
        //给按钮添加样式
        BtnStyle() {
        //按钮的容器添加样式i
            var btnContainer = {
                position: 'absolute',
                top: '40%',
                left: 0,
                width: '100%',
                height: '20%',
                // backgroundColor: 'red',
                display: 'flex',
                justifyContent: 'space-between'
            }
            for (var i in btnContainer) {
                this.btnContainer.style[i] = btnContainer[i];
            }
            //给两个按钮添加样式
            var Btn = {
                // display: 'inline-block',
                width: '10%',
                height: '100%',
                // backgroundColor: 'blue',
                fontSize: this.container.clientWidth * 0.05 + 'px',
                textAlign: 'center',
                color: '#fff',
                lineHeight: this.container.clientWidth * 0.125 + 'px',
                backgroundColor: 'rgba(255,0,0,0.5)',
            }
            for (var i in Btn) {
                this.leftBtn.style[i] = Btn[i];
                this.rightBtn.style[i] = Btn[i];
                // console.log(i, Btn[i]);
            };
            this.leftBtn.innerHTML = '&lt;';
            this.rightBtn.innerHTML = '&gt;';
        },
        //给小圆点添加样式
        pointStyle() {
        //给ul添加样式
            ulStyle = {
                width: this.container.clientWidth + 'px',
                listStyle: 'none',
                display: 'flex',
                justifyContent: 'space-evenly',
                position: 'absolute',
                bottom: this.container.clientWidth * 0.05 + 'px',
            }
            for (var i in ulStyle) {
                this.pointUl.style[i] = ulStyle[i];
            }

			//给li添加样式
            liStyle = {
                width: this.container.clientWidth * 0.03 + 'px',
                height: this.container.clientWidth * 0.03 + 'px',
                backgroundColor: 'orange',
                borderRadius: '50%',
                float: 'left',
                cursor: 'pointer'
            }
            this.pointLi.forEach((item) => {
                for (var i in liStyle) {
                    item.style[i] = liStyle[i];
                }
            })
        },
        //添加事件
        addEvent() {
            //右按钮点击事件
            this.rightEvent();
            //左按钮点击事件
            this.leftEvent();
            //小圆点点击事件
            this.pointEvent();
            //小圆点样式改变事件
            this.changeEvent();
            //自动轮播事件
            this.autoPlay();
            //停止轮播事件
            this.stopPlay();
            //重新播放事件
            this.replay();
        },
        //右滑事件
        rightEvent() {
            this.rightBtn.onclick = () => {
                if (!this.flag) {
                    return
                }
                this.flag = false;
                // console.log(this.imgLi);
                this.count++;
                // console.log(this.count);
                animate(this.imgUl, { left: -this.container.clientWidth * this.count }, 1000, () => {
                    if (this.count >= this.imgLi.length - 1) {
                        this.imgUl.style.left = '0'
                        this.count = 0;
                    }
                    this.flag = true
                })
                this.changeEvent();
            }
        },
        leftEvent() {
            this.leftBtn.addEventListener('click', () => {
                if (!this.flag) {
                    return;
                }
                this.flag = false;
                this.count--;
                if (this.count < 0) {
                    this.count = this.imgLi.length - 1;
                    this.imgUl.style.left = -this.count * this.container.clientWidth + 'px';
                    this.count--;
                }
                animate(this.imgUl, { left: -this.container.clientWidth * this.count }, 1000, () => {
                    this.flag = true
                })
                this.changeEvent();
            })
        },
        pointEvent() {
            // console.log(this.pointLi);
            this.pointLi.forEach((item, index) => {
                item.addEventListener('click', () => {
                    if (!this.flag) {
                        return;
                    }
                    this.flag = false;
                    this.count = index;
                    animate(this.imgUl, { left: -this.container.clientWidth * this.count }, 1000, () => {
                        this.flag = true
                    })
                    this.changeEvent();
                })

            })
        },
        changeEvent() {
            this.pointLi.forEach((item) => {
                item.style.backgroundColor = 'orange'
            });
            if (this.count > this.imgLi.length - 2) {
                this.pointLi[0].style.backgroundColor = "red"
            } else {
                this.pointLi[this.count].style.backgroundColor = "red"
            }
        },
        autoPlay() {
            this.time = setInterval(() => {
                this.rightBtn.onclick();
            }, 1000)
        },
        stopPlay() {
            this.container.addEventListener('mouseenter', () => {
                // console.log(1);
                clearInterval(this.time);
            })
        },
        replay() {
            this.container.addEventListener('mouseleave', () => {
                // console.log(1);
                // this.time = setInterval(() => {
                //     this.rightBtn.onclick();
                // }, 1000)
                this.autoPlay();
            })
        }

    }
    return Loop;
})();

















(function() {

    function aaa() {

    }

    function Animal() {

    }


    return Animal
})();
江呱呱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现无缝轮播（包括面向对象的写法）
12-13
原生js实现无缝轮播（包括面向对象的写法），包括实现思路。
0原生js-面向对象-无缝轮播图.zip
09-29
本项目"0原生js-面向对象-无缝轮播图.zip"旨在通过原生JavaScript和面向对象编程思想，创建一个无缝轮播图特效。无缝轮播图是一种常见的网页元素，它为用户提供了一种优雅的方式来展示多张图片或内容，让它们看起来...
基于面向对象的图片轮播（js原生代码）
weixin_34075551的博客
11-15 162
无论你想走多远，你都需要不断地走下去。前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标，也提现这你的代码能力，开发的水平。废话不多说，进入今天的主要分享————基于面向对象思想的图片轮播。其效果如下所示： 正如图片所示这样我们要实现的效果，这里与我们以往不同的是我们的布局十分简洁。其中html布局如下： 1 <!DOCTYPE html> 2 ...
js面向对象轮播图写法
b741759587的博客
09-26 181
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;}ul,li{list-st...
纯js的面向对象的轮播图
qq_43654645的博客
11-09 543
面向对象的轮播图 js文件： /*这里是封装的轮播图js,function Carousel(parent,list,bnList)—HTML进行调用时仅需输入，轮播图的父级，轮播图片 路径数组list、左右按钮图片路径数组。 *此轮播图特点，每次灌入新的信息前都还将之前的信息以及数据进行清空，典型的热更案例 * * 整体思路：创建一个大的容器div：子①放轮播图的imgCon div；...
JS的面向对象实例--轮播图
weixin_46370288的博客
03-08 261
实现轮播图的方法有很多种，本篇是通过同时控制两个索引（要走的，要进来的）的方式让图片动起来 结构部分 <body> //展现图片的空间 <div class="box"> //放轮播图所有图片 <div class="imgbox"> <a><img src="../img/banner1.jpg" alt=""&...
js面向对象轮播图js
最新发布
08-09
js面向对象轮播图js
JS案例：轮播图（面向对象），最终版（注释全面）
12-08 774
Html： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
JS案例 轮播图（面向对象），最终版（注释全面）
HTML网页设计
08-12 524
/用一个动画函数控制轮播。
面向对象-js原生轮播图-从零到一
小方块的世界
05-05 608
js原生轮播图面向对象编程js原生实现轮播图效果1.先看效果图2.需要实现的功能：3.html结构4.功能实现4.1 创建对象4.2动画效果由translateX实现4.3根据轮播图片个数生成数字按钮节点4.4轮播图数字按钮点击切换状态4.5轮播事件，也是点击右箭头的事件4.6事件绑定4.7初始化方法4.8实例化Carousel对象，大功告成5备注 面向对象编程js原生实现轮播图效果 1.先看效果...
基于js对象封装的轮播图
06-13
动画计时。调用简单。基于js对象封装的轮播图插件，兼容计算。
JavaScript基于面向对象实现的无缝滚动轮播示例
11-21
本文实例讲述了JavaScript基于面向对象实现的无缝滚动轮播。分享给大家供大家参考，具体如下： 无缝轮播 面向对象 一、HTML及CSS部分同前文《原生JavaScript实现的无缝滚动功能》。 JavaScript面向对象部分如下： function Seamless(obj) { this.obj = document.getElementById(obj); this.oXSlide = GLOBAL.Dom.getElementsByClassName('J_XSlide', this.obj)[0]; this.li = this.oXSlide.getElemen
JavaScript轮播图（面向对象）
qq_45799465的博客
02-08 1671
步骤 轮播图1 HTML+CSS 轮播图2 动态生成页面 通过 JavaScript程序 生成 div标签中 所有 轮播图需要的标签 生成 ul ol div 标签节点 根据数组动态生成 原始 ul>li ol>li ul > li > img ol > li 第一个li添加 class,active 将生成的 ul>li ol>li 字符串 写入 ul ol 标签节点 将 ul ol div 标签节点 写入 轮播图div中 获取 原始 ul.
JavaScript面向对象写个轮播图
七元八元
08-20 1282
源码： 实战地址 兼容IE，通过透明度控制图片的显示。 1. 面向对象：对外统一提供调用接口的编程思想。     js中Prototype属性解释及常用方法        通过对象的原型属性和方法创建：    在对象原型附加的属性或者方法将成为对象实例化的一部分，类似一个父类，新创建的对象都继承了prototype的属性和方法。这是因为当一个对象被创建时，这个构造函数 将会把它的属性pro...
js的面向对象实例--轮播图的实现
chxlx的博客
03-08 461
轮播图的实现方法有很多种，下面是用控制索引的方法来实现功能。同时控制要进来图片的索引与要出去图片的索引；此外功能还包括点击图片对应的数量按钮可以进行图片切换。 body代码如下： css代码图如下 js代码如下 js代码中用到的move函数封装 以上为轮播图实现的函数代码。 ...
JS面向对象轮播图实现
weixin_38337068的博客
06-29 1750
在这里只是把实现代码写出来，需要深入讨论交流的加微信 ni461586842 *{ margin: 0; padding: 0; } #pci{ width: 400px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } ul{ position: ab
Js中利用面向对象实现轮播图
FLJ1027的博客
12-10 444
利用面向对象实现轮播图，按钮切图，及延时器自动切图。图片请自行准备啦， <head> <meta charset="utf-8"> <title></title> <style> .cont{width:1000px;height:260px;margin: 20px auto;position: relative;overfl...
js中面向对象的轮播图的实现
qq_44732010的博客
03-06 255
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #box{height:300px;width:500px;border:solid...
运用面向对象框架写JS轮播图
A_9888的博客
12-02 160
此种方法优点 运用面向对象思想框架式写活JS轮播图 不对写死图片数量，直接通过增加css图片实现页面效果 优化代码数量，优化性能。 代码 html部分 <div class="swiper"> <ul id="item-container" class="clearfix"> <li class="item"&g...
JavaScript构造函数与面向对象实现轮播图
"本文主要介绍了使用JavaScript实现轮播图的两种方法：构造函数和面向对象。通过具体的代码实例，展示了如何构建一个基本的轮播图功能，包括图片切换、导航点以及左右箭头控制。" 在JavaScript中实现轮播图是一项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值