查看“模板:超级轮播”的源代码

{{#if:{{#var:超级轮播JSCSS}}||{{#vardefine:超级轮播JSCSS|1}}{{JS|SuperCarousel}}{{CSS|SuperCarousel}}}}<includeonly><div class="SuperCarousel {{#if:{{{悬放停播|}}}|noPause}} {{{carouselClass|}}}" style="--i:{{{起始图|0}}};--s:{{{切换动画|1s}}};width:{{{w|720px}}};height:{{{h|200px}}};aspect-ratio:{{{宽高比|}}}" data-style="{{{切换样式|slide}}}" data-mode="{{{切换模式|loop}}}" data-direction="{{{切换方向|r2l}}}" data-gap="{{{切换间隔|2}}}" data-unit="{{{间隔单位|s}}}">
	<div class="body">
        {{#forargs:|k|v|{{#switch:{{#var:k}}<!-- |w=|h=|宽高比=|切换样式=|切换模式=|切换方向=|切换间隔=|间隔单位=|悬放停播=|起始图=|切换动画= -->
        |自定内容={{#var:v}}
        |#default={{#iferror: {{#expr:{{#var:k}}}}||<div class="item">{{#var:v}}</div>}}        <!-- |#default=<div class="item">{{#var:v}}</div> -->
        }}}}
	</div>
	{{#ifeq:{{{控制条|1}}}|隐藏||<div class="controller {{#ifeq:{{{控制条|}}}|悬停显示|autoHide}}"></div>}}
</div>
</includeonly><noinclude>
{{InfoBox|此模板初始来源于Tools同名模板：[https://wiki.biligame.com/tools/%E8%B6%85%E7%BA%A7%E8%BD%AE%E6%92%AD 超级轮播]<br>使用形式存在一定魔改}}
<h3>参数说明</h3>
*w：宽度
*h：高度
*宽高比：响应布局，即尺寸随窗口变化时，保持此比例进行变化
<br>
*carouselClass：选填，追加轮播类名
<br>
*悬放停播
**<任意值>：任意值，鼠标悬放时，轮播图依然播放
<br>
*起始图
**<数字>：轮播图排序-1，比如：希望从第2张图开始播，则起始图=1
<br>
*切换动画
**<时间数字>s：默认为1s
<br>
*切换样式（可选）
**slide：滑动（默认）
**stackIn：切入
**stackOut：切出
<br>
*切换模式（可选）
**loop：循环（默认）,可以简单理解为最后一张展示完毕后会像下一张一样切换到第一张，就像一个环。
**stack：叠放，可以简单理解为最后一张展示完毕后会快速向前翻回第一张，就像一叠纸。
<br>
*切换方向（可选）
**r2l：从右到左。（默认）
**l2r：从左到右。
**b2t：从下到上。
**t2b：从上到下。
<br>
*切换间隔（可选）两张图切换的间隔数
**5：5时间单位（默认）
**-1：特别的，如果设置为"-1"，则<b>不会自动切换</b>
<br>
*间隔单位（可选）切换间隔的时间单位
**s：秒（默认）
**ms：毫秒
<br>
*控制条（可选）
**<任意值>（默认）：如果设置任意值，则会自动生成一个控制条
**隐藏：没有控制条
**悬停显示：控制条默认隐藏，鼠标悬停才显示

<h3>举例：自定内容</h3>
<pre>{{超级轮播|w=100%|h=20%|宽高比=720/200
|自定内容={{#arraymap:11、22、33|、|@|<div class="item">@</div>|}}
}}</pre>
{{超级轮播|w=100%|h=20%|宽高比=720/200
|自定内容={{#arraymap:11、22、33|、|@|<div class="item">@</div>|}}
}}

<h3>举例：直接写内容</h3>
<pre>{{超级轮播|w=100%|h=20%|宽高比=720/200
|A
|B
|C
}}</pre>
{{超级轮播|w=100%|h=20%|宽高比=720/200
|A
|B
|C
}}
<bstyle>.SuperCarousel > .body > .item {
	border: 1em solid;
}
.SuperCarousel > .body > .item:nth-child(odd) {
	background: pink;
}
.SuperCarousel > .body > .item:nth-child(even) {
	background: lightgreen;
}</bstyle>
</noinclude>