前言
具体功能参考
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('