Widget:SuperCarouselMaker

<style class="scStyle"></style>

<label>尺寸</label> <label>响应式<input type="checkbox" name="responsive"></label> <label>宽度<input type="number" name="width" value="720" min="1">px</label> <label>高度<input type="number" name="height" value="200" min="1">px</label> <label>宽度<input type="number" name="widthR" value="100" min="1" max="100">%</label> <label>比例<input type="number" name="x" value="720" min="1">/<input type="number" name="y" value="200" min="1"></label>

---

<label>切换样式 <select name="style"> <option value="slide">滑动</option> <option value="stackIn">切入</option> <option value="stackOut">切出</option> </select> </label> <label>切换模式 <select name="mode"> <option value="stack">叠放</option> <option value="loop">循环</option> </select> </label> <label>切换方向 <select name="direction"> <option value="r2l">从右到左（←）</option> <option value="l2r">从左到右（→）</option> <option value="b2t">从下到上（↑）</option> <option value="t2b">从上到下（↓）</option> </select> </label> <label>切换间隔<input type="number" name="gap" value="5" min="-1"> <select name="unit"> <option value="s">秒</option> <option value="ms">毫秒</option> </select> </label> <label>控制条<input type="checkbox" name="ctrl" checked></label> <label class="autoHide">自动隐藏<input type="checkbox" name="autoHide"></label>

---

<label>附加<input type="checkbox" name="extra"></label> <label>鼠标悬浮时不暂停<input type="checkbox" name="noPause"></label> <label>起始元素<input type="number" name="i" value="0" min="0"></label> <label>动画持续时间<input type="number" name="s" value="1" min="0" step="0.01">秒</label>

---

<label>元素（换行分隔）</label> <textarea name="items">111111111 222222222 333333333 444444444 555555555 666666666</textarea>

---

<label>额外CSS</label> <textarea name="scStyle"> /* 这么丑的演示样式你不会想用的吧 */ .SuperCarousel > .body > .item { border: 1em solid; /* 大黑边 */ }

.SuperCarousel > .body > .item:nth-child(odd) { background: pink; /* 奇数元素粉色背景 */ }

.SuperCarousel > .body > .item:nth-child(even) { background: lightgreen; /* 偶数元素绿色背景 */ }</textarea>

<textarea class="code" readonly></textarea>

<script> init()

function init() { setTimeout(() => { try { $(() => { createView(createHtml(getOption())) }) $(document).on("input", "#scMaker .option *[name]", () => { createView(createHtml(getOption())) }) } catch (e) { init() } }, 1000) }

function getOption() { let $option = $("#scMaker .option") let o = { responsive: $option.find("[name=responsive]").is(":checked"), style: $option.find("[name=style]").val(), mode: $option.find("[name=mode]").val(), direction: $option.find("[name=direction]").val(), gap: parseInt($option.find("[name=gap]").val()) || 5, unit: $option.find("[name=unit]").val(), ctrl: $option.find("[name=ctrl]").is(":checked"), advanced: $option.find("[name=advanced]").is(":checked"), items: $option.find("[name=items]").val().split("\n"), extra: $option.find("[name=extra]").is(":checked"), } if (o.responsive) { $option.find(".responsive").show() $option.find(".normal").hide() o.width = parseInt($option.find("[name=widthR]").val()) || 100 o.x = parseInt($option.find("[name=x]").val()) || 720 o.y = parseInt($option.find("[name=y]").val()) || 200 } else { $option.find(".normal").show() $option.find(".responsive").hide() o.width = parseInt($option.find("[name=width]").val()) || 720 o.height = parseInt($option.find("[name=height]").val()) || 200 } if (o.ctrl) { $option.find(".autoHide").show() o.autoHide = $option.find("[name=autoHide]").is(":checked") } else { $option.find(".autoHide").hide() } if (o.extra) { $option.find(".extra").show() o.noPause = $option.find("[name=noPause]").is(":checked") $option.find("[name=i]").attr("max", o.items.length - 1) o.i = parseInt($option.find("[name=i]").val()) if (o.i >= o.items.length) { o.i = o.items.length - 1 $option.find("[name=i]").val(o.i) } o.s = parseFloat($option.find("[name=s]").val()) } else { $option.find(".extra").hide() } return o }

function createHtml(o) { $(".scStyle").html($("textarea[name=scStyle]").val()) let items = "" o.items.forEach((e, n, a) => { items += `

${e}

`

})

return `

${items}

${o.ctrl ? `

` : ""}

`

}

function createView(html) { $("#scMaker .view").html(html) $("#scMaker .code").val(html) } </script> <style> #scMaker { width: 100%; }

#scMaker .option label { margin: 0 0.2em; }

#scMaker .option input[type="number"] { width: 4em; }

#scMaker .option [name="items"] { width: 100%; height: 10em; resize: vertical; }

#scMaker .option [name="scStyle"], #scMaker .code { width: 100%; height: 20em; resize: vertical; } </style>