Carouselle 3d

Soyez le premier à donner votre avis sur cette source.

Vue 14 183 fois - Téléchargée 1 472 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
cs_arta Messages postés 98 Date d'inscription dimanche 22 janvier 2006 Statut Membre Dernière intervention 24 juillet 2013
10 juin 2013 à 10:08
Bonjour tous

Ce carroussel est-il toujours d'actualité ?
@karamel Messages postés 1812 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 octobre 2022 145
30 déc. 2011 à 12:25
sur la ligne 12 j'ai rajouté une variable qui est dalleur commenté (// vitesse de rotation) augmente la valeur ca diminuera la vitesse
amelamelamelamelamelamel Messages postés 3 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 29 décembre 2011
29 déc. 2011 à 11:13
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
amelamelamelamelamelamel Messages postés 3 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 29 décembre 2011
29 déc. 2011 à 11:00
dans le code ou je peut modifier la vitesse de rotation SVP
FloAvril Messages postés 6 Date d'inscription vendredi 20 juin 2008 Statut Membre Dernière intervention 28 juillet 2010
28 déc. 2011 à 17:31
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.