Carouselle 3d
Description
comme son nom l'indique il s'agit d'un carouselle 3D j'ai fait en sorte de tout automatise dans le sens ou pour choisir la taille du carouselle il suffit uniquement de modifier sa taille dans le css les images s'adapteronts automatiquement et si on veut plus le configurer j'ai ajouter des commentaires dans le js je l'ai aussi equiper d'un prechargement,ainsi que d'un voile afin de visualiser les image en grand pour cela il suffit de cliquer sur l'image par contre il n'ai pas compatible avec ie 6 a cause de probleme avec le dom mais j'ai quand meme ajouter une autre source plus simple compatible avec ie 6
demo: http://scriptevol.toile-libre.org/elipse/elipse.html
ouep
demo: http://scriptevol.toile-libre.org/elipse/elipse.html
Source / Exemple :
var tbimage=['mini/tigre.jpg','mini/tigre.jpg','mini/graffitis.jpg','mini/arc-en-ciel.jpg','mini/bougies.jpg','mini/chameau.jpg','mini/foudre.jpg','mini/infrarouge.jpg','mini/arbres.jpg','mini/oiseaux.jpg','mini/fleuve.jpg'];
//tableau pour les images la premiere image est celle au centre du carouselle
preImages=new Array;
var setX=0
function souris(s){
dde=(navigator.vendor) ? document.body : document.documentElement;
setX =s.clientX + dde.scrollLeft;
}
navigator.appName.substring(0,3)=="Net" ? document.addEventListener("mousemove", souris, false) : document.attachEvent('onmousemove',function(){souris(event)});
function ellipse(){
var gaga=document.getElementById('genelipse')
if(typeof this.rot == 'undefined'){
this.rot=0
this.cocoef=0.35/1 // angle de l'elipse 1/1 donne un cercle
this.all=gaga.getElementsByTagName("img")
this.pi2=(Math.PI*2)/(this.all.length-1)
this.taillemage=gaga.offsetHeight/10 // taille des images
}
var oml=((gaga.offsetLeft+(gaga.offsetWidth/2))-setX)/2000 // vitesse de rotation
oml=oml>0 ? -oml : Math.abs(oml)
if(oml>0.02 || oml<-0.02){ // troue au centre afin que l'image reste fixe
if(this.rot>=Math.PI*2 || this.rot<=-(Math.PI*2)){
this.rot=0
}
this.rot=this.rot+oml
var rayon=(gaga.offsetWidth/2)-(this.taillemage/2)-25
var t=gaga.offsetHeight/2
for(var i=1;i<=this.all.length-1;i++){
var gogo=this.all[i]
var decal=this.rot+this.pi2*i
gogo.style.left=(Math.cos(decal)*rayon)+rayon+15+"px";
gogo.style.top=((Math.sin(decal)*rayon)*this.cocoef)+t+"px";
gogo.style.width=this.taillemage*(Math.sin(decal))+this.taillemage+"px";
var opasi=Math.sin(decal)+1
if(navigator.appName.substring(0,3)!="Mic"){
gogo.style.opacity=opasi;
}
else{
gogo.style.filter="alpha(opacity="+opasi*100+")"
}
if(Math.cos(decal)*rayon>40 || Math.cos(decal)*rayon>(-40)){
gogo.style.zIndex=1
}
else{
gogo.style.zIndex=0
}
}
}
if(arguments[0]=='depart'){
oxo=setInterval(ellipse,50)
}
}
function anul(){
clearInterval(oxo)
}
function changeelipse(e){
var lui=(navigator.appName.substring(0,3)=="Mic") ? event.srcElement : e.currentTarget;
var gaga=document.getElementById('genelipse')
var el=gaga.getElementsByTagName("img")[0]
var taille=lui.offsetWidth/lui.offsetHeight
el.setAttribute('src',lui.src)
el.style.left=(gaga.offsetWidth/2)-((taille*el.offsetHeight)/2)+'px'
}
function precharge(){
var valcomplet=0
var general=document.getElementById('genelipse')
if(typeof this.dema == 'undefined'){
this.dema='ok'
for (i = 0; i < tbimage.length; i++){
preImages[i] = new Image();
preImages[i].src = tbimage[i];
}
var constrution=document.createElement('div')
constrution.className='barrelipseid'
var constrution2=document.createElement('div')
constrution2.className='barrelipseid2'
var constrution3=document.createElement('span')
constrution3.className='barretxt'
constrution3.appendChild(document.createTextNode('00 %'))
constrution.appendChild(constrution2);
constrution.appendChild(constrution3);
general.appendChild(constrution);
}
for (i = 0; i < preImages.length; i++){
if(preImages[i].complete==true){
valcomplet++
}
}
general.getElementsByTagName("div")[1].style.width=(general.getElementsByTagName("div")[0].offsetWidth/preImages.length)*valcomplet+'px'
general.getElementsByTagName("span")[0].childNodes[0].nodeValue=Math.round((100/general.getElementsByTagName("div")[0].offsetWidth)*((general.getElementsByTagName("div")[0].offsetWidth/preImages.length)*valcomplet))+' %'
if(valcomplet==preImages.length){
general.removeChild(general.getElementsByTagName("div")[0]);
initelipse()
return false
}
setTimeout(precharge,100)
}
function initelipse(){
var general=document.getElementById('genelipse')
for(var i=0;i<=preImages.length-1;i++){
var constrution=document.createElement('img')
if(i==0){
constrution.className='centre';
}
if(i!=0){
constrution.setAttribute('onmouseover','changeelipse(event)');
constrution.className='imlipse';
constrution.setAttribute('onclick','prevoile(event)');
}
general.appendChild(constrution);
}
var all=general.getElementsByTagName("img")
for(var i=0;i<=all.length-1;i++){
var gogo=all[i]
gogo.setAttribute('src',preImages[i].getAttribute("src"));
gogo.onclick=prevoile
if(parseInt(navigator.userAgent.substring(30,31))<=7){
gogo.onmouseover=changeelipse;
}
}
if(parseInt(navigator.userAgent.substring(30,31))<=7){
general.attachEvent('onmouseover',function(){ellipse("depart")})
}
general.onmouseout=anul
general.setAttribute('onmouseover','ellipse("depart")');
all[0].style.left=(general.offsetWidth/2)-(all[0].offsetWidth/2)+'px'
ellipse()
}
function prevoile(e){
var lui=(navigator.appName.substring(0,3)=="Mic") ? event.srcElement : e.currentTarget;
var nomimg=lui.getAttribute("src").lastIndexOf("/")+1;
nomimg=lui.getAttribute("src").substring(nomimg);
voile('images/'+nomimg)
}
Conclusion :
ouep
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.