使用工厂模式封装JavaScript轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

Elinkers

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量215

点赞数

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/Echianer/article/details/109180289

版权

使用工厂模式封装js轮播图

前言
一、功能介绍
二、实现方法
三、完整代码
四、结果展示
总结

前言

具体功能参考
https://blog.csdn.net/Echianer/article/details/109173765
本文运用工厂模式制作一个模型能够创建两个及以上的轮播图的函数

一、功能介绍

通过输入轮播图的名字，位置，图片数量，颜色来创建对象

二、实现方法

这里运用前一篇创建轮播图的代码将其封装成为一个函数，并且使用innerHTML方法写html层和css样式

三、完整代码

代码如下：

<html>
    <head>

    </head>
    <body>
        <script type="text/javascript">

            
            function autopicture(name,left,top,picnum,color){
   
                this.name=name;
                this.left=left;
                this.top=top;
                this.picnum=picnum;
                this.color=color;


//1.0创建框架
                this.create=()=>{
   
//外部框架
                    let block = document.createElement('div');
                        block.className = this.name;
                        block.style.overflow = "hidden";
                        block.style.position = "relative";
                        block.style.width = "400px";
                        block.style.height = "200px";
                        block.style.float = "left";
                        block.style.left=this.left;
                        block.style.top=this.top;
                        block.innerHTML = '<div class="picture'+this.name+'" style="width:'+this.picnum*400+'px; height:200px; position:absolute; transition:1s;"></div>'
                                        +'<div class="spot_list'+this.name+'" style="right:30px; bottom:10px; position:absolute;"></div>'
                                        +'<div class="conner'+this.name+'" style="width:400px; height:20px; position:absolute; bottom:100px;""></div>';
//得先插入然后再找picture的值,picture长条
                    let bo = document.body; 
                        bo.insertBefore(block, bo.lastChild);
//diagram节点，与num有关
                    let picture = document.getElementsByClassName(&#

最低0.47元/天解锁文章

Elinkers

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用工厂模式封装JavaScript轮播图

使用工厂模式封装js轮播图前言一、功能介绍二、实现方法三、完整代码四、结果展示总结前言具体功能参考https://blog.csdn.net/Echianer/article/details/109173765本文运用工厂模式制作一个模型能够创建两个及以上的轮播图的函数一、功能介绍通过输入轮播图的名字，位置，图片数量，颜色来创建对象二、实现方法这里运用前一篇创建轮播图的代码将其封装成为一个函数，并且使用innerHTML方法写html层和css样式三、完整代码代码如下：<htm
复制链接

扫一扫

专栏目录