Homepage von Basti1012 = ,Kurze Scripte und Codeschnipsel ,Hauptmenü

< >
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>