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>