图像轮播框
注意
此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。
未经组件作者或工作人员允许，请勿修改此页的内容。
这是什么
一个图像轮播组件，它能循环显示多张图像，而不只是单独一张。
使用方法
在你需要图像轮播框的地方，插入如下代码而不是标准插图方块。
确保你要使用的图像已经上传到了你的页面里。如果你选择无视这条睿智的忠告并在设置好轮播组件之后才上传图像，那么你的图像会无法显示，除非彻底刷新（Ctrl+Shift+R）页面。
[[include :scp-wiki-cn:component:carousel
| images=photograph.png,old-map.png,jumpscare.gif
| caption=一系列图片。
| interval=5
| wiki=scp-wiki-cn
| page=SCP-173
| width=300px
| height=240px
| position=right
| no-caption=false
| background=white
| options=yes
]]
使用图像轮播框会带来一些可访问性问题 - 对某些用户来说，连续的移动会非常分散注意力。强迫读者等待阅读文章的图片也不是一个很好的主意。这个组件也会因为在非交互的文本中强行添加交互性而惹恼你的读者。如有可能，我建议不要使用此组件。使用一系列标准插图方块作为代替。
每个选项都是什么
以斜体字标注的均为可选项。其他则是必须要添加的。
如果你省略了可选项，则它将设置为其默认值。如果你省略了必选项，则轮播框无法正常工作。
| images： | 一系列图像，由半角逗号“,”分割。确保每张图像都上传到了页面里。你亦可以通过链接指定图像 这些图像会以你列举的顺序出现在轮播里。 |
| links： （可选） |
一系列链接至每个图像的链接，由半角逗号“,”分割。若填写本参数，确保链接数量与图像数量一致。 |
| caption： （可选） |
可选。出现在轮播框下方的说明文字。 如果没有说明文字，请确保将 no-caption 设置为 true。 默认值：“{$caption}” |
| interval： （可选） |
可选。如果你将它设置为非零的数字，那么轮播框会在相应秒数之后自动转至下一张图像。 如果用户点击箭头来手动换图，或者如果他们的鼠标正悬停在轮播框上，图像就不会轮换。 默认值：“0” |
| wiki： | 你使用轮播框的页面所在维基的名称，举例而言，scp-wiki、scp-wiki-cn 或 scpsandboxcn。 |
| page： | 你使用轮播框的页面名称。如果有页面分类的话，请将之包括在内。（“名称”指你在链接里看到的末端名称 - 比如，SCP-\̅\̅\̅\̅-J 的页面名称为 scp-botnik-j。） |
| width： （可选） |
轮播框里最宽的图像宽度。 默认值：“300px” |
| height： （可选） |
轮播框里最高的图像高度。 默认值取决于浏览器 |
| position： （可选） |
轮播框在页面中的水平位置。“left”为左，“right”为右，“center”为中。 默认值：“right” |
| no-caption： （可选） |
如果你不想要说明文字，将之设置为“true”。不然，则留空，或者设置为“false”，或把这行整个去掉。 默认值：“false” |
| background： （可选） |
图像的背景颜色。 默认值：“transparent”（透明） |
| options： | 你是否需要显示详细选项（播放/暂停键和一排小圆点）？如果不需要，设置为除了“yes”以外的任何东西。 默认值：“yes” |
我想让轮播框横跨整个页面！
将 width 设置为“100%”，position 设置为“center”。
我将宽度/高度设置为最大图像的尺寸了，但这东西实在太大了！
用小一点的数字，或者把图像改小一点。
{$caption}
基础代码
轮播框的 HTML 结构
<html ng-app="carousel" ng-controller="CarouselController"> <head> <script src="https://cdn.jsdelivr.net/npm/angular@1.7.2/angular.min.js"></script> <script src="https://scp-wiki.wdfiles.com/local--code/component%3Acarousel/2"></script> <link href="http://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/gh/scp-cn-tech/sigma9@cn/cn/sigma9_ch.min.css" rel="stylesheet"> <link href="https://scp-wiki.wdfiles.com/local--code/component%3Acarousel/4" rel="stylesheet"> </head> <body> <div class="wrapper" id="background"> <div class="carousel"> <div class="horsie" ng-repeat="image in images track by $index" ng-class="[index > $index ? 'past' : null, index === $index ? 'present' : null, index < $index ? 'future' : null]"> <img ng-src="{{image}}" ng-if="!links[$index]"> <a href="{{links[$index]}}" target="_blank" ng-if="links[$index]"> <img ng-src="{{image}}"> </a> </div> </div> <div class="arrow decrementor" ng-class="index === 0 ? 'inactive' : 'active'" ng-click="increment(-1)"> <div class="image"></div> </div> <div class="arrow incrementor" ng-class="index === images.length-1 ? 'inactive' : 'active'" ng-click="increment(1)"> <div class="image"></div> </div> <div class="bubble-holder" ng-class="[options === 'yes' ? null : 'invisible']"> <div class="bubble" ng-repeat="image in images track by $index" ng-class="[index === $index ? 'present' : null]" ng-click="selectImage($index)"> </div> </div> <div class="control play" ng-click="control('play')" ng-class="[state === 'play' ? 'active' : null, options === 'yes' ? null : 'invisible']"></div> <div class="control pause" ng-click="control('pause')" ng-class="[state === 'pause' ? 'active' : null, options === 'yes' ? null : 'invisible']"></div> </div> </body> </html>
页面版本: 19, 最后编辑于: 26 Nov 2021 09:02
