多图片切换（SVG）代码生成

起个网名好难 · 发表于 2024-10-14 20:15

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由起个网名好难于 2024-10-15 12:43 编辑

起个网名好难 · 发表于 2024-10-14 20:15

本帖最后由起个网名好难于 2024-10-15 12:41 编辑

<div id="oBlk"style="width:90%;margin:16px auto;"></div>
<textarea id="svgContent" cols="132" rows="48" style="position:relative;width:80%;margin:24px auto;display:block;"></textarea>
<script>
var pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraicFC4lHDD9gXLjkP0t8KaSiaD23ogSY0kJrWeHpH2PURFutuD3zBWZ5w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorazWBxST3mp8CqWNzic0yVbjxFiaEKGgJQCicmNG29kBVTvmGy0B63vj3icQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora70LbpiaPY1ricJsYCEHA7VQarJJMWhibbFPb60tpCs5IdwAI0zCQib3aDg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoravTbQVoPrj8AXG5xCbqp904wdbkfgyg3iaLa5bv0tXiamKbkJ3DL3icb1Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraGSTInqZK6ich0Tv0icVsl1PDpNibu8YfInd7eicQNuhogibDfAMbWlfKHGw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora6biapbpUHYhEW7SDu72DorZKhtcS5RdcfabmvqUAia60KAIDgFFBMWpg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoragzAmRyvXMiceUulsmacy9a79r63e45afKxROG6YZbONqbd2uxJqMF0A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoray90w4ZtSqlK6EcK5j04IkQnKmIn8ZvibJ4MwOJxVFiaP7LRa76SJyJSA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorakNsckcIdd5SusBPwy99pdmic2IyJoFSZT6DDQ0r1mSp0kibrynjzYgFg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoradZpFPf4vcPJNJ2H5o4ibmC2NePTEspl64fbQyCv5m3h4UcqHT1WVl4w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorabHo5BItiaciah1NLW2D8rsZyzF1CfcnoD8GB2MjmysW9kMziagRpoXQvg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraAOGlTraGWJKJdhlROmBK9T7qGHaA9afiaAlxL7soIQg8vPxTDWGyhOA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraricW5ib8NPcd06lG2flBgoz8Z1RKrib2UoGib5czmXtptxk4UCWwqdgOEA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora3V1QusPZhVu7BsWjZqXPqB1vywiaTuz8qBEv3s8023fIFia9H5gwkLjg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraER2jZsNQL96lbibGxKE9Hia06wdgMoOyU83YgVXrmzzgrYiaWRP4Liayibg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraOticAzrHiaP6PiazcibDglbHUEfQ6RYCHGf6nX4QcZO43lR47Kv3emebaQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraOmiaRWNBg0Lgws6v9xuq7QTcuLIPWp0giceUSFibJZ4jnamZZ6AKrBh2w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora4O3poHvWLxHbXpEwu927wzNmQfics5DXEzUo8z2jDnibk0RRQz6iaoZLQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraZyD6P4VNmKXPCsC9NjrtCMvh7cyFNhrCAS8jLQgZX0VeUuQ1T46Kuw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorada9gFRHiaiajBmZlVrSWR4vFtaW8iakCEddSd0vQicLL4Ryibjd6W1y50uQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraopUIZ9iaKaQL6tIOvP7URra22aWWQ1qD2JbuuSPMfkxYicw6QCk0hU1Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoramuBr5E2icMeZF5X5Mgyick7wc2yeL8Gk26BhZUibzoqUWLyxvkVAnCLsA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraxSHZrVBc7AefFvwwiaNmGFH8Laia4KHibGDhM9CnRyfHG6ibgAFaKLBbKQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraiaibiaylLe8eLicoibicHkLmMvjHOccWU4fjkferWSiaXJ9WEupJy97pUicCBw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorajDDWV2COFImO0oMYPibIfHNVHxCuGJAFhVv5L6fRUcOrMg8rZzrkJFQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraSBt9HjO2d124ia46icY52eSicxliay94oxx5C4aeYmECDhw6DSZU9ibw2icg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoragicAIbAHpZGoFo9dEcEiaicdCSUpzEqsODpQ8GjM9P5nQl4KYRIYC9Vzw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraj2wY0ItJRKFica7zjkou8libljH8GN67voicXdFA7KwwAUGLsyM2thuLQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorarMdibsHyQDmTkLXPRkvVLTQjibAMmVmReuMflDoicB48784ZI5Opsf01A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraDerpQz052dc7hIJwwHAk2icdO7ricnIs3Iat2n3yeC1A2nicZo53qfMgg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraj46AqGELL94Ap6zVCib8ZMascdg2OMOBVODtaEicwzTDUmicriap9AUUfQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorauf1P1gVfAZsusQjbODcianPZa35ItEKerACiahHYcdUd7FBv7TNIiaj7g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora7nhIPbyDgRY2DjXpFdIZQ1sVgDXp8PPobnl6PicM4dY24f6dicibNkFWA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorabguEyLwMtfI7qqvuUJ5ZCY2oCNtV8EX3k3Eicu8fd3pmVt5QjgzEqiaA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora4fHscnvfMuuEcQ9bRccO4mI2ibaVb5dcveSZKoVGSHfMpS6gUL7umXA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoranCxWBZoBNVoic6LYK2TClevF79l8laLYmzjN3w6D7Wh0Kib6QWfia6F7g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorafia0ExiapJ2BnUmpOC7AiaDftBsG5PR0ia3WViaiaS0zN8oib98UxaTJZnAKQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraD6fusZI5TINtVhDCyquXvMThzNqIxkKNsAuYBicrsSNmWcCIPqIvSPw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora2b0icWDnlBFc2DN9Qf2PicBehUGibvicXb1riacFxiaT06dlLr11j0cHPI1A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraGiby97o5roFawwaC4RkWFQNCesUsjc0D5vfOsFSdQYeM21XRh2ibHCTw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraAgcGQrhsuL3X4JJDib3cH3rTLBTuUgk80W9lawfKdwIfib6SBfIRciazg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoralsZBc1AiamHAicx8wqibxYcyqSsutz29Bjciaa93FMuaIpE8aiaiaVmZibfHg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraiaGx8HKJjToibugKt5g4MJRjdiaouZzhUZF4wjCZI7jia25l0Mmu2D4C9g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraL834z3wUyibibicMaibDib7hOV8YKEIn3SOoBQb8iaYiaMyicybbCs2e306NlA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraLVccP9BcqnI6F24IJa2CiauobWxwic3MEDMyRvKvTVk99fSYthQLEyug/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraicuwbGFuItzCnK4wQ2rsRa0oZ043OIfNMf6Uttkf3vhIvB4AI3xqGDw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora3HqVvaCjySgt0SZxehic4iaNlVvdxD44MRVgfY6ZKnXLkWOadDyQLNaw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraceFwcGWnmYBEtcUiaNClSTP1ujHicTh4D0DOnwR9AiaicADIY19ia1zqyiaw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora9Na82vWncqmtRJOfh1Ne3WRRtzbZkiciaJ5Ff39ISUr5N2qkMUGD9klQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraWpLP7nqmh3ibQL5uEr6tQsn90BibI4YfR9eDUMibLzMFQuCiakKXYtljCg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraWaAblkUSxYInzedjVYCXFia3QsWDgsbYiaoOLHr1Q0jDqV5Xz8EQbFfA/640"
];
var sf = document.createElement('script');
sf.type = 'text/javascript';
sf.src = "https://file.uhsea.com/2410/e20785a5312a64aec0ba34b2bbcf78dbMA.js";
sf.charset = "utf-8";
document.body.appendChild(sf);
sf.onload = () => {
let picWidth = 910, picHeight = 568;
genSVGtag(picWidth,picHeight);
oBlk.innerHTML = svgObj.outerHTML;
}

复制代码

红影 · 发表于 2024-10-14 20:36

这个厉害了，图片还是以各种不同方式出现的

起个网名好难 · 发表于 2024-10-14 20:39

红影发表于 2024-10-14 20:36
这个厉害了，图片还是以各种不同方式出现的

方式是随机产生的

起个网名好难 · 发表于 2024-10-14 20:40

登录/注册后可看大图

红影 · 发表于 2024-10-14 20:41

图片的出现方式是任意调用mask="url(#mask9)" 0-11也就是12个遮罩效果而实现的吧。去看了一下，有方形、圆形、菱形、椭圆还有百叶等等，多种打开方式呢

红影 · 发表于 2024-10-14 20:49

起个网名好难发表于 2024-10-14 20:39
方式是随机产生的

是的，每次去产生svg代码，图片依次轮播的效果也不一样

起个网名好难 · 发表于 2024-10-14 20:49

红影发表于 2024-10-14 20:41
图片的出现方式是任意调用mask="url(#mask9)" 0-11也就是12个遮罩效果而实现的吧。去看了一下，有方形、圆 ...

12种，只想到这么多了

红影 · 发表于 2024-10-14 20:49

起个网名好难发表于 2024-10-14 20:40

谢谢难难带来的好东西

显示全部楼层 · 发表于 2024-10-14 20:53

提示: 作者被禁止或删除内容自动屏蔽

起个网名好难 · 发表于 2024-10-14 20:55

红影发表于 2024-10-14 20:49
是的，每次去产生svg代码，图片依次轮播的效果也不一样

随机的是这样子，只要有图片最后怎么样不关心。

起个网名好难 · 发表于 2024-10-14 20:55

红影发表于 2024-10-14 20:49
谢谢难难带来的好东西

凑合吧。

红影 · 发表于 2024-10-14 20:57

起个网名好难发表于 2024-10-14 20:55
随机的是这样子，只要有图片最后怎么样不关心。

我弄了4张图图去试了一下，之前图图太多了。
发现每次刷新后的svg代码的遮罩不一样

红影 · 发表于 2024-10-14 20:58

起个网名好难发表于 2024-10-14 20:55
凑合吧。

难难很厉害。我记得小辣椒上次也说想做图片轮播，这下方便多了

起个网名好难 · 发表于 2024-10-14 21:00

醉美水芙蓉发表于 2024-10-14 20:53
老师我怎么只看见代码？

就是个代码帖，没具体内容。

换掉图片就成了自己的帖子。

起个网名好难 · 发表于 2024-10-14 21:02

红影发表于 2024-10-14 20:57
我弄了4张图图去试了一下，之前图图太多了。
发现每次刷新后的svg代码的遮罩不一样

或许出来4张一个方式也是可能的

起个网名好难 · 发表于 2024-10-14 21:03

红影发表于 2024-10-14 20:58
难难很厉害。我记得小辣椒上次也说想做图片轮播，这下方便多了

要比较多的图片才略有意思

红影 · 发表于 2024-10-14 21:07

起个网名好难发表于 2024-10-14 20:49
12种，只想到这么多了

还是难难自己设计的，厉害啊，又刷新了一下，还看到了斜三角的遮罩和横百叶

红影 · 发表于 2024-10-14 21:08

起个网名好难发表于 2024-10-14 21:02
或许出来4张一个方式也是可能的

我还好，试了几次刷新了，一次都没重复的

起个网名好难 · 发表于 2024-10-14 21:08

红影发表于 2024-10-14 21:07
还是难难自己设计的，厉害啊，又刷新了一下，还看到了斜三角的遮罩和横百叶

都是些简单图形

醉美水芙蓉该用户已被删除	发表于 2024-10-14 20:53 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

[原创] 多图片切换（SVG）代码生成

请马上登录，朋友们都在花潮里等着你哦：）

评分

评分

浏览过的版块

花潮帅哥

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

花潮贵宾

花潮美女

虎

龙

狗

猪

多彩人生

星月交辉

海样胸怀

火热情怀

优雅迷人

神秘浪漫

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

相遇之美

一往情深

花好月圆

心香一瓣

紫色情节

金剪刀

妙笔生花

风雨同行

我心永远

天长地久

幸福快乐

绚丽缤纷

喜乐安康

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

花潮管理