Carouselle 3d

Soyez le premier à donner votre avis sur cette source.

Vue 13 955 fois - Téléchargée 1 464 fois

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

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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013

Bonjour tous

Ce carroussel est-il toujours d'actualité ?
Messages postés
1787
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
9 juin 2021
131
sur la ligne 12 j'ai rajouté une variable qui est dalleur commenté (// vitesse de rotation) augmente la valeur ca diminuera la vitesse
Messages postés
3
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
29 décembre 2011

oml=oml>0 ? -oml : Math.abs(oml)
if(oml>0.02 || oml<-0.02){

if(this.rot>=Math.PI*2 || this.rot<=-(Math.PI*2)){
this.rot=1
}

this.rot=this.rot+oml
var rayon=(gaga.offsetWidth/2)-(this.taillemage/2)-50
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,1000)
}
}

function anul(){
clearInterval(oxo)
}

function change(lui){
var gaga=document.getElementById('genelipse')
var el=document.getElementById('centre')
var taille=lui.offsetWidth/lui.offsetHeight
el.src=lui.src
//el.style.left=(gaga.offsetWidth/2)-((taille*el.offsetHeight)/2)+'px'

}

j'ai pas compris cette partis du est ce que vvous pouvez m'aidiez SVP
Messages postés
3
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
29 décembre 2011

dans le code ou je peut modifier la vitesse de rotation SVP
Messages postés
6
Date d'inscription
vendredi 20 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2010

Amelamemelamelamelamel >point27>vitesse de rotation
Afficher les 28 commentaires

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.