图片轮播框

图片轮播框由CroquemboucheCroquembouche制作并发布在此处,由W AsrielW Asriel翻译、调整并搬运至中文站。

用法

若你需要使你的图片有轮播效果,糊上这段代码而不是标准插图方块(image block)。

确保你要使用的图片已经上传到了你的页面里。如果你选择无视这条睿智的忠告,那么你的图片会无法显示,除非彻底刷新(Ctrl+Shift+R)本页面。

[[include :scp-wiki-cn:cqb: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 / 图片: 一系列图片名称,由半角逗号","分割。确保每张图片都上传到了页面里。
这些图片会以你列举的顺序出现在轮播里。
caption / 说明:
(可选)
可选。出现在轮播下方的说明文字。
如果没有说明文字,请确保将no-caption设置为true。
默认值:{$caption}"
interval / 间隔:
(可选)
可选。如果你把它设置为非零的数字,那么轮播框会在这么多秒的间隔之后自动显示下一张图片。
如果用户点击箭头来手动换图,或者如果他们的鼠标正悬停在轮播框上,图片就不会轮播。
默认值:"0"
wiki / 维基: 你轮播所用的图片在哪个维基里,举例而言,scp-wikiscp-wiki-cnscpsandboxcn
page / 页面: 你轮播所用的图片所在页面的名称。如果有category的话,请将它包括在内。
width / 宽度:
(可选)
轮播框里最宽的图片的宽度。
默认值:"300px"
height / 高度:
(可选)
轮播框里最高的图片的高度。
默认值取决于浏览器。
position / 位置:
(可选)
你希望它在页面的何处。"left"为左,"right"为右,"center"为中。
默认值:"right"
no-caption / 无说明:
(可选)
如果你不希望有底端说明文字,将此设置为"true"。不然,则留空,或者设置为"false",或把这行整个去掉。
默认值:"false"
background / 背景:
(可选)
图片的背景颜色。
默认值:"transparent"(透明)。
options / 选项: 你是否需要展示详细的选项(播放/暂停键和一排小圆点)?如果不需要,设置为除了"yes"以外的任何东西。
默认值:"yes"

我想让这张图横跨整个页面,这样我就跟仙人掌一样还比他酷!
width设置为"100%",position设置为"center"。

我将宽度/高度设置为最大的图片了,但这东西实在太大了!
用小一点的数字,或者把图片改小一点。



基础代码

轮播框的HTML结构

<html ng-app="carousel" ng-controller="CarouselController">
<head>
    <script src="http://cdn.bootcss.com/angular.js/1.7.2/angular.min.js"></script>
    <script src="http://topia.wikidot.com/local--code/cqb%3Acarousel/2"></script>
    <link href="http://d3g0gp89917ko0.cloudfront.net/v--b23e476b7ade/common--theme/base/css/style.css" rel="stylesheet">
    <link href="http://scp-wiki-cn.wikidot.com/component:theme/code/1" rel="stylesheet">
    <link href="http://topia.wikidot.com/local--code/cqb%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}}">
        </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>

TODO:
修正手机上的说明文字的宽度
显示有几张图的小点点
是否添加它们的选项
点它们来跳转到某张图
在轮播关掉后重新启用间隔的按钮(角落里的会消退的暂停/播放按钮?)
通过url导入css

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License