Hier verwenden Sie einen Link: http://www.avineon.com/Rotating Div Javascript
öffnen Link auf der Oberseite sehen. Vier Bilder rotieren.
Ich brauche etwas ähnliches mit Javascript.
Ist es möglich, indem Sie Javascript verwenden.
Ich glaube nicht, dass Sie viel Glück haben werden, wenn Sie versuchen, das in reinem Javascript zu tun. Es möglicherweise möglich sein, mit den aufstrebenden Leinwand und SVG-Bibliotheken wie Raphael, aber Sie haben immer noch Cross-Browser-Probleme. Diese Seite hat Flash verwendet, und ich würde empfehlen, das zu verwenden, wenn Sie einen solchen Effekt wollten.
... warum Sie, dass auf Ihrer Website wollen würde allerdings eine andere Geschichte ...
Sie könnten so etwas Ähnliches, aber nicht genau.
Transparency = Unterstützt in FF, Safari, IE7 + Bildbreite Ändern = Platz Bild in div mit diesem Css
.class img {
display: block;
width: 100%;
height: 100%
}
Dadurch wird das Bild strecken, um die .class- div zu füllen. Sie können dann JS verwenden, um dieses div schmaler als das Karussell zu machen, und das enthaltene Bild wird innerhalb des div animiert.
Sie müssten dann die Mauspositionen nachverfolgen, um festzustellen, wie schnell sie sich dreht.
Sie können eine Gleichung verwenden Cosinus mit für sanfte Beschleunigung von dem Enden (IIRC)
Sie werden jedoch nicht in der Lage sein, die Bilder in umgekehrter Richtung zu bekommen, wenn Sie eine Kopie in einer Server-Side-Sprache oder Verwendung erstellen Segeltuch.
Ihre beste Wette wäre nicht, etwas in 3D zu rendern, sondern visuelle Tricks, um einen 3D-Effekt zu approximieren. Das heißt, verwenden Sie Perspektive/Bildverformung, damit es so aussieht, als würde sich ein Würfel drehen, ähnlich wie das, was implementiert wurde at this page, was eine bessere Erklärung der beteiligten Mathematik hat.
Wirklich, Sie sind wahrscheinlich besser dran, nur mit Flash.
Dieser Effekt ist in JavaScript möglich, indem einfach jedes der Bilder width, height und left Stile im Laufe der Zeit geändert wird. Es ist ein kompliziertes Skript, muss aber nur diese drei Stile auf jedem der Bildelemente interpolieren.
Um den Rotationseffekt zu erhalten, dekrementieren Sie den width Stil des Bildes in einer setInterval Funktion, während Sie die left Stileigenschaft verschieben. Es gibt eine leichte Abnahme an der height auch.
Sie benötigen zwei Bilder für jede Seite, eine Vorder- und Rückseite. Wenn die Breite auf Null verringert wird, vertauschen Sie das Bild mit seiner umgedrehten Version und beginnen Sie, die Breite zu erhöhen.
Alternativ können Sie auch Webkit's und Firefox's transform css properties verwenden.
Oder versuchen, eine dieser Komponenten, die Coverflow ähnlich aussehen: Protoflow, ImageFlow
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n');
document.write('.dyncontent{display: none; width: 728px; height: 90px;}\n');
document.write('</style>');
}
var curcontentindex=0;
var messages=new Array();
function getElementByClass(classname){
var inc=0;
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i];
}
}
function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
messages[prevcontentindex].style.display="none"; //hide previous message
messages[curcontentindex].style.display="block"; //show current message
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", 5000);
}
}
</script>
<table width="100%">
<tr align="center">
<td>
<div class="dyncontent" style="display: block">
first
</div>
<div class="dyncontent">
second
</div>
<div class="dyncontent">
Third
</div>
</td>
</tr>
</table>
</body>
</html>
+1 mit diesem letzten Punkt zustimmen! – alex