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, 最后编辑于: 28 May 2021 12:35
