3D_Picture_Carousel

Bilder Karussell mit Manuelen vor und zurück Buttons
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D Picture Carousel JavaScript CSS3</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{margin:0; padding: 0;} section, footer, nav { display: block; } body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; padding: 0px; overflow: hidden; background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%); background-image: linear-gradient(180deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%); background-attachment: fixed; } /*Ändere hier die Höhe und Breite des Bildes das muss auch in Javascript angepasst werden panelSize*/ .container { position: relative; margin: 0 auto; width: 13vw; height: 13vw; perspective: 1000px; perspective-origin: 100px -100px; } #carousel { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: rotateY(0deg); } #carousel figure { display: block; position: absolute; width: 100%; height: 100%; outline: 1px solid black; color: white; text-align: center; } .center{text-align: center; margin: 20px auto 50px; } figure img{cursor: pointer;} iframe{ width: 700px; height: 8em; margin: auto; text-align: center; display: block; border:none;} </style> </head> <body> <form> <p class="center"> <input type=button onClick="history.go(-1)" value="vorige Seite"> <input type="button" value=" prev" onClick="zurueck()"> <input type="button" value="next" onClick="weiter()" > </p> </form> <div class="container"> <div id="carousel"> <!--nicht vergessen TweenMax von greensock wird benutzt--> <script type="text/javascript" src="https://www.on-design.de/Scripts/TweenMax.min.js"></script> <script language="javascript"> var tz; //der folgende Wert ist die viewportBreite wenn er geändert wird, muss er auch im CSS bei .container geändert werden. 13vw ist Prozent entspricht der Muliplikation mit 0.13 var panelSize = document.documentElement.clientWidth*0.13; var numberOfPanels = 12; //gebe hier die Anzahl der Bilder ein. var degree = 360/numberOfPanels; var count=0; tz = Math.round( ( panelSize / 2 ) / Math.tan( Math.PI / numberOfPanels ) ); for(i=0; i<numberOfPanels;i++){ /* das folgende Script erzeugt folgendes HTML mit Durchnummerierung hier die url zu den Bildern ändern <figure class="bild"><img src="img/paint/1.jpg" width="200" alt="Painting by Michael Albers" onClick="goBild(0)"/> </figure> */ document.write("<figure class='bild'><img src='https://basti1012.bplaced.net/image/"+(i+1)+".png' width='"+panelSize+"' alt='Painting by Michael Albers' onClick='goBild("+(i)+")'/></figure>"); /* document.getElementsByClassName("bild")[i].style.background = "hsla("+ (i*degree)+", 100%, 50%, 0.8 )"; */ document.getElementsByClassName("bild")[i].style.transform = "rotateY("+(i*degree)+"deg) translateZ("+tz+"px)"; document.getElementsByClassName("bild")[i].firstChild.nodeValue = (i+1); } function weiter(){ count++; var counter = Math.round(-count*degree); TweenMax.to("#carousel", 1, {rotationY:counter}); } function zurueck(){ count--; var counter = Math.round(-count*degree); TweenMax.to("#carousel", 1, {rotationY:counter}); } function drehen(){ TweenMax.to("figure", 1,{rotationY:180}); TweenMax.to("#carousel", 1,{rotationX:90}); } function goBild(seite){ count = seite; var counter = Math.round(-count*degree) TweenMax.to("#carousel", 1, {rotationY:counter}); } </script> </div> </div> </body> </html>