karussel-mit-iframes-oderimages.php
Quell Code
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="http://sebastian1012.bplaced.net/diashows.css"> <style> #stage { margin: 2em auto 1em 50%; height: 140px; -webkit-perspective: 1200px; -webkit-perspective-origin: 0 50%; } #rotator a{ position: absolute; left: -81px; } #rotator a iframe{ padding: 10px; border: 1px solid #ccc; background: #fff; -webkit-backface-visibility: hidden; } #rotator a:nth-of-type(1) iframe{ -webkit-transform: rotateY(-90deg) translateZ(300px); } #rotator a:nth-of-type(2) iframe{ -webkit-transform: rotateY(-60deg) translateZ(300px); } #rotator a:nth-of-type(3) iframe{ -webkit-transform: rotateY(-30deg) translateZ(300px); } #rotator a:nth-of-type(4) iframe{ -webkit-transform: translateZ(300px); background: #000; } #rotator a:nth-of-type(5) iframe{ -webkit-transform: rotateY(30deg) translateZ(300px); } #rotator a:nth-of-type(6) iframe{ -webkit-transform: rotateY(60deg) translateZ(300px); } #rotator a:nth-of-type(n+7) { display: none; } @-webkit-keyframes rotator { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(30deg); } } #rotator { -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; -webkit-animation-timing-function:cubic-bezier(0,0,1,1); -webkit-animation-duration: 3s; // -webkit-animation-delay: 1s; } #rotator:hover { -webkit-animation-play-state: paused; } #largeimg { position:relative; bottom:0px; width:100%; height:auto; } #rotator #largeimg { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } #rotator #largeimg.visible { display: block; } #wrap { width: 600px; height: 600px; position: relative; line-height: 0; } /*KARUSSEL 3*/ </style> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://zakariamouhid-pi-slider-js.bitballoon.com/js/PiSliderJS.min.js"></script> </head> <body> <h4> Das Karussel </h4> <img id="largeimg"></img> <div id="stage"> <div id="rotator" style="-webkit-animation-name: rotator;"> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/1.jpg" width="140"></iframe></a> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/2.jpg" width="140"></iframe></a> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/3.jpg" width="140"></iframe></a> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/4.jpg" width="140"></iframe></a> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/5.jpg" width="140"></iframe></a> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/6.jpg" width="140"></iframe></a> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/7.jpg" width="140"></iframe></a> <a> <iframe src="http://sebastian1012.bplaced.net/bilder/8.jpg" width="140"></iframe></a> </div> </div> <script> var imgs = document.querySelectorAll("img,iframe"); for (var i = 0; i < imgs.length; i++) { imgs[i].addEventListener("click", function () { var lrgimg = document.getElementById("largeimg"); if (lrgimg.classList.contains("visible")) { lrgimg.classList.remove("visible"); } else { lrgimg.src = this.getAttribute("data-largeimg"); lrgimg.classList.add("visible"); } }); } var target = document.getElementById("rotator"); var arr = target.getElementsByTagName("a"); var rotateComplete = function() { with(target.style) { webkitAnimationName = MozAnimationName = msAnimationName = ""; } target.insertBefore(arr[arr.length - 1], arr[0]); setTimeout(function(el) { with(el.style) { webkitAnimationName = MozAnimationName = msAnimationName = "rotator"; } }, 0, target); }; target.addEventListener("webkitAnimationEnd", rotateComplete, false); target.addEventListener("animationend", rotateComplete, false); target.addEventListener("MSAnimationEnd", rotateComplete, false); $('#rotator img').click(function(){ src=$(this).attr('src') $('#largeimg').attr('src',src) }) </script> </body> </html>
Comments (1)
Die Canvas Balken Uhr ist ja mal Fett