Carousel
{$caption}
<html ng-app="carousel" ng-controller="CarouselController">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="http://scp-zh-tr.wikidot.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="http://www.scp-wiki.net/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}}" 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>function getQueryVariable(variable) {
var query = document.location.href.match(/\?.*$/g)[0].substring(1);
var vars = query.split("&");
for(var i = 0; i < vars.length; i++) { // >
var pair = vars[i].split("=");
if(pair[0] === variable) return pair[1];
}
return false;
}
(function(){
var carousel = angular
.module('carousel',[])
.controller('CarouselController',CarouselController);
CarouselController.$inject = ['$scope','$timeout'];
function CarouselController($scope,$timeout){
$scope.images = getQueryVariable("images").split(",");
$scope.links = getQueryVariable("links").split(",");
var wiki = getQueryVariable("wiki") || "scp-wiki";
var page = getQueryVariable("page");
for(var i = 0; i < $scope.images.length; i++) { // >
if(!/^https?:\/\//.test($scope.images[i]))
$scope.images[i] = `http://${wiki}.wdfiles.com/local--files/${page}/${$scope.images[i]}`;
}
// $scope.images is an array of image URLs
if($scope.links[0] == "{$links}")
$scope.links = []; // no parameter given
$scope.index = 0;
$scope.increment = function(amount) {
if(amount > 0 && $scope.index < $scope.images.length-1) {
$scope.index += amount;
}
if(amount < 0 && $scope.index > 0) {
$scope.index += amount;
}
$scope.state = "pause";
}
var interval = getQueryVariable("interval") || 0;
if(interval === "{$interval}") interval = 0;
$scope.state = "play";
if(interval === 0) $scope.state = "pause";
function oscillate() {
$timeout(function() {
if(!mouseover && $scope.state === "play") {
if($scope.index < $scope.images.length-1) {
$scope.index++;
} else {
$scope.index = 0;
}
}
if($scope.state === "play") {
oscillate();
}
}, interval*1000, true);
}
var mouseover = false;
document.documentElement.onmouseover = function () {
mouseover = true;
}
document.documentElement.onmouseout = function () {
mouseover = false;
}
if($scope.state === "play") {
oscillate();
}
document.getElementById('background').style.background = getQueryVariable("background");
$scope.selectImage = function(index) {
$scope.index = index;
$scope.state = "pause";
}
$scope.control = function(direction) {
switch(direction) {
case "play":
$scope.state = "play";
oscillate();
break;
case "pause":
$scope.state = "pause";
break;
}
}
$scope.options = getQueryVariable("options");
if($scope.options === "{$options}") $scope.options = "yes";
}
})();.carousel-container { position: relative; z-index: 1; float: right; margin: 0 1em 1em 1em; }
.carousel-container.left { float: left; }
.carousel-container.center { float: none; clear: both; margin: 0 auto 1em auto; }
.carousel-container iframe { position: relative; z-index: 2; width: 334px; border: none; }
.carousel-container .carousel-caption { position: relative; background-color: #eee; border: solid 1px #666; padding: 2px 0; font-size: 80%; font-weight: bold; text-align: center; width: 300px; margin-top: -3px; box-shadow: 0 1px 6px rgba(0,0,0,.25); z-index: 3; max-width: 675px; }
#page-content .carousel-container .carousel-caption-wrapper { max-width: 673px; }
.carousel-container .carousel-caption-wrapper { padding: 0 16px; }
.carousel-container .carousel-caption p { margin: 0; padding: 0 10px; }
.carousel-container .carousel-caption.true { display: none; } html { width: calc(100% - 32px); height: calc(100% - 4px); margin: 0; padding: 0; }
body { width: 100%; height: 100%; margin: 0; padding: 2px 16px; background: transparent; }
.wrapper { position: relative; width: 100%; height: 100%; }
.carousel { position: relative; width: calc(100% - 2px); height: calc(100% - 2px); overflow-x: hidden; border: 1px solid #666; box-shadow: 0 1px 6px rgba(0,0,0,.25); box-sizing: content-box; }
.horsie { position: absolute; height: 100%; width: 100%; top: 0; left: 0; transform: translate(0,0); transition: transform 0.3s ease-in-out; }
.horsie img { object-fit: contain; width: 100%; height: 100%; }
.horsie.past { transform: translate(-100%,0); }
.horsie.future { transform: translate(100%,0); }
.arrow { height: 30px; width: 30px; border: 1px solid #666; border-radius: 50%; position: absolute; top: 50%; background: #eee; box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer; }
.arrow .image { height: 30px; width: 30px;position: absolute; top: 0; left: 0; background-position: 50% 50%; background-size: 80% 80%; background-repeat: no-repeat; opacity: 0.6; transition: opacity 0.1s ease-in-out; }
.arrow.inactive { cursor: default; }
.arrow.inactive .image { opacity: 0; }
.decrementor { left: 0; transform: translate(-50%,-50%); }
.decrementor .image { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAdElEQVR4AezQJwKAMBQD0DCOjAfD9j1BXVUdR0OxkWzCJvHvD/x5aVxEDMZBWVfAIDB1JQwOY96IUSzGYjCaxdgMJuMwOQJ4c51jlnc0HgsCUs5pPbX82csozaQsFqVuSpksSjIpg0OJBdACqlorw7AEowAAblWUrl8sD5AAAAAASUVORK5CYII='); }
.incrementor { right: 0; transform: translate(50%,-50%); }
.incrementor .image { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAcUlEQVR4Ae3QpwJAUACF4WM+sU6xV9M0TdI8mmR389j+07878PfSHOjYnYAETTdtP5Sh4VAik8pZlMSkChYlM6mSRalLKWN2FqolVLNqGgsyOE/zOZ+9i5FZTMFgJBaT34gRWUzGYAABKYMZizvm75W1TreU8DMmtioAAAAASUVORK5CYII='); }
.bubble-holder { display: flex; position: absolute; width: calc(100% - 60px); height: 20%; justify-content: center; align-items: flex-end; flex-wrap: wrap; align-content: flex-end; bottom: 0; margin: 5px 0; left: 30px; }
.bubble { border: 2px solid #666; height: 0; width: 0; margin: 5px; border-radius: 50%; transition: all 0.2s ease-in-out; background-color: white; }
.bubble.present { height: 2px; width: 2px; background-color: white; margin: 4px; }
.bubble-holder:hover .bubble { height: 6px; width: 6px; margin: 2px; cursor: pointer; }
.bubble-holder:hover .bubble.present { height: 12px; width: 12px; margin: -1px; }
.control { position: absolute; height: 10px; width: 10px; left: 5px; bottom: 5px; background-size: contain; opacity: 0.3; cursor: pointer; }
.control.active { opacity: 1; cursor: default; }
.control.play { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAgElEQVR4Ae2UQRWAIBBEJwIRjGAEI9hEG0ATaaINtIE0kAbqnrh4/M/Tzr//B7A78nzF0wvKraiAiF5ODYzIWBQIkXFpZETGqo4R2bkmRmTs6hmRERUIURsKQNSGAhBlQlSYqyXisQ/i+6tmYiA3YkUqs7SZqJHCFFtS+Lf8PZ4HilOsPBFiYmoAAAAASUVORK5CYII='); }
.control.pause { left: 20px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAOUlEQVR4Ae3WoQ0AMAwDwY7ezdsFzKyg3EthBgdzJCl309X7opev3wMBAQEtAQEBAQEBAU09+ZL0AdrO+xGDE6h0AAAAAElFTkSuQmCC'); }
.invisible { display: none; }页面版本：0，最后编辑：2021年5月28日 12:35（UTC）