Sujet Précédent Sujet Suivant

Js : 2 défilements images dans même page ???

Résolu/Fermé
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012 - 1 mars 2012 à 15:12
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 - 1 mars 2012 à 16:55
Bonjour,

Voilà, je bloque avec ce script que j'ai récupéré sur mon ancien site.
L'idée est d'avoir 2 défilement d'images en js sur la même page html.
Par où commencer ?

MERCI !!!

6 réponses

Réponse 1 / 6
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 15:17
Salut,
je pense qu'il manque un bout de ton message, (il manque le script en question ) sinon a l'aveugle je dirai de verifier que ton script ne cible pas avec une id, c'est un cas classique des bugs où, lorsqu'on duplique ça ne marche plus...

montre nous ton script (allez sois pas pudique du script ! =p ) ça iras mieux pour t'aider !
0
Réponse 2 / 6
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012
1 mars 2012 à 15:22
Et hop, le voici (ben oui j'avais oublié mais là c'est moi qui bug !) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>page_carousel</title>
	</head>

	<body onload="Carousel()" bgcolor="white">
		<script type="text/javascript">

// 7 variables to control behavior
	var Car_Image_Width=100;
	var Car_Image_Height=100;
	var Car_Border=true;		// true or false
	var Car_Border_Color="white";
	var Car_Speed=4;
	var Car_Direction=true;		// true or false
	var Car_NoOfSides=12;		// must be 4, 6, 8 or 12

/* array to specify images and optional links. 
	For 4 sided carousel specify at least 2 images
	For 6 sided carousel specify at least 3
	For 8 sided carousel specify at least 4
	For 12 sided carousel specify at least 6
 If Link is not needed keep it ""
*/
	Car_Image_Sources=new Array(
		"img1.gif","https://www.linkorthopaedics.com",
		"img2.gif","https://www.linkorthopaedics.com",
		"img3.gif","https://www.linkorthopaedics.com",
		"img4.gif","https://www.linkorthopaedics.com",
		"img5.gif","https://www.linkorthopaedics.com",
		"img6.gif","https://www.linkorthopaedics.com",
		"img7.gif","https://www.linkorthopaedics.com",
		"img8.gif","https://www.linkorthopaedics.com",
		"img9.gif","https://www.linkorthopaedics.com",
		"img10.gif","https://www.linkorthopaedics.com",
		"img11.gif","", //this slide isn't linked
		"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/
	CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
	C_Coef=new Array(
		3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4,	0,
		Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
	var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
	C_Pre_Img=new Array(Car_Image_Sources.length);
	var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
	C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

	function Carousel(){
		if(document.getElementById){
			for(i=0;i<Car_Image_Sources.length;i+=2){
				C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
			C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
			Car_Div=document.getElementById("Carousel");
			for(i=0;i<C_HalfNo;i++){
				CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);	
				CW_I[i].style.position="absolute";
				CW_I[i].style.top=0+"px";
				CW_I[i].style.height=Car_Image_Height+"px";
				if(Car_Border){
					CW_I[i].style.borderStyle="solid";
					CW_I[i].style.borderWidth=1+"px";
					CW_I[i].style.borderColor=Car_Border_Color}
				CW_I[i].src=Car_Image_Sources[2*i];
				CW_I[i].lnk=Car_Image_Sources[2*i+1];
				CW_I[i].onclick=C_LdLnk;
				CW_I[i].onmouseover=C_Stp;
				CW_I[i].onmouseout=C_Rstrt}
			CarImages()}}

	function CarImages(){
		if(!C_Stppd){
			C_TotalW=0;
			for(i=0;i<C_HalfNo;i++){
				C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
				C_TotalW+=C_ClcW[i]}
			C_LeftOffset=(C_MaxW-C_TotalW)/2;
			for(i=0;i<C_HalfNo;i++){
				CW_I[i].style.left=C_LeftOffset+"px";
				CW_I[i].style.width=C_ClcW[i]+"px";
				C_LeftOffset+=C_ClcW[i]}
			C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
			if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
				if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
				if(Car_Direction){
					CW_I[C_HalfNo]=CW_I[0];
					for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
					CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
					CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
				else{	for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
					CW_I[0]=CW_I[C_HalfNo];
					CW_I[0].src=Car_Image_Sources[C_CrImg];
					CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
				C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
		setTimeout("CarImages()",50)}

	function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
	function C_Rstrt(){C_Stppd=false}
</script>
		<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#381f52" height="270">
					<tr align="left" valign="top" height="118">
					<td rowspan="2" bgcolor="white" width="126" height="250"></td>
					<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla1</font></td>
					</tr>
					<tr height="122">
					<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
					</tr>
					</table>
		<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#E01341" height="270">
					<tr align="left" valign="top" height="118">
					<td rowspan="2" bgcolor="white" width="126" height="250"></td>
					<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla2</font></td>
					</tr>
					<tr height="122">
					<td bgcolor="white" width="419" height="122" align="center">ici pour le deuxième défilement d'images</td>
					</tr>
					</table>
			
	</body>

</html>


Bon, on ne rigole pas, hein, je sais qu'il est pourri ce script, on me l'a déjà dit mais bon, j'aime bien le rendu moi !
Merci pour votre aide :)))
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 15:29
tu aurais une page ou on peut avoir un aperçu de l'effet ???
j'avoue que comme ça j'arrive pas trop a voir ce que ça donne !
0
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012
1 mars 2012 à 15:31
www.ilovemedia.info/page_carousel.html
0
Réponse 3 / 6
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
Modifié par vincent170186 le 1/03/2012 à 15:51
alors normalement si tu copie colle ça ça devrait marché ! (bon c'est cracra ce que j'ai fait ! j'ai dupliquer les fonction en mettent un "_bis" a la fin de certaine variable ! mais normalement cest ok !

cherche --> //ici metre l'url des images du deuxiemme defil
dans le code et en dessous tu mets les url des images et les liens qui correnspondent a ton deuxiéme defiloir (je sais pas si ça existe defiloir ! mais tu m'as comprit ! )

et voila le code -->


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>page_carousel</title>
</head>

<body onload="Carousel();Carousel_bis() " bgcolor="white">
<script type="text/javascript">

// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById('Carousel')){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

//ici metre l'url des images du deuxiemme defil
Car_Image_Sources_bis=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I_bis=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img_bis=new Array(Car_Image_Sources_bis.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel_bis(){
if(document.getElementById('Carousel_bis')){
for(i=0;i<Car_Image_Sources_bis.length;i+=2){
C_Pre_Img_bis[i]=new Image();C_Pre_Img_bis[i].src=Car_Image_Sources_bis[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div_bis=document.getElementById("Carousel_bis");
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i]=document.createElement("img");Car_Div_bis.appendChild(CW_I_bis[i]);
CW_I_bis[i].style.position="absolute";
CW_I_bis[i].style.top=0+"px";
CW_I_bis[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I_bis[i].style.borderStyle="solid";
CW_I_bis[i].style.borderWidth=1+"px";
CW_I_bis[i].style.borderColor=Car_Border_Color}
CW_I_bis[i].src=Car_Image_Sources_bis[2*i];
CW_I_bis[i].lnk=Car_Image_Sources_bis[2*i+1];
CW_I_bis[i].onclick=C_LdLnk;
CW_I_bis[i].onmouseover=C_Stp;
CW_I_bis[i].onmouseout=C_Rstrt}
CarImages_bis()}}

function CarImages_bis(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i].style.left=C_LeftOffset+"px";
CW_I_bis[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources_bis.length)C_CrImg=0;
if(Car_Direction){
CW_I_bis[C_HalfNo]=CW_I_bis[0];
for(i=0;i<C_HalfNo;i++)CW_I_bis[i]=CW_I_bis[i+1];
CW_I_bis[C_HalfNo-1].src=Car_Image_Sources_bis[C_CrImg];
CW_I_bis[C_HalfNo-1].lnk=Car_Image_Sources_bis[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I_bis[i]=CW_I_bis[i-1];
CW_I_bis[0]=CW_I_bis[C_HalfNo];
CW_I_bis[0].src=Car_Image_Sources_bis[C_CrImg];
CW_I_bis[0].lnk=Car_Image_Sources_bis[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages_bis()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#381f52" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla1</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#E01341" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla2</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel_bis" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>

</body>

</html>
0
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012
1 mars 2012 à 16:00
ben au départ, c'était déjà un peu pourri alors pas facile de travailler là-dessus !
Bon et bien, on y est presque... Déjà un grand merci de me redonner espoir ;)
juste encore un tout petit problème, les images sautent dans le premier "défiloir" (j'ai mis la page en ligne tu peux voir)
0
Réponse 4 / 6
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 16:11
ça va mieux avec ça ?

-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>page_carousel</title>
</head>

<body onload="Carousel();Carousel_bis() " bgcolor="white">
<script type="text/javascript">

// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById('Carousel')){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

//ici metre l'url des images du deuxiemme defil
Car_Image_Sources_bis=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I_bis=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img_bis=new Array(Car_Image_Sources_bis.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg_bis=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel_bis(){
if(document.getElementById('Carousel_bis')){
for(i=0;i<Car_Image_Sources_bis.length;i+=2){
C_Pre_Img_bis[i]=new Image();C_Pre_Img_bis[i].src=Car_Image_Sources_bis[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div_bis=document.getElementById("Carousel_bis");
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i]=document.createElement("img");Car_Div_bis.appendChild(CW_I_bis[i]);
CW_I_bis[i].style.position="absolute";
CW_I_bis[i].style.top=0+"px";
CW_I_bis[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I_bis[i].style.borderStyle="solid";
CW_I_bis[i].style.borderWidth=1+"px";
CW_I_bis[i].style.borderColor=Car_Border_Color}
CW_I_bis[i].src=Car_Image_Sources_bis[2*i];
CW_I_bis[i].lnk=Car_Image_Sources_bis[2*i+1];
CW_I_bis[i].onclick=C_LdLnk;
CW_I_bis[i].onmouseover=C_Stp;
CW_I_bis[i].onmouseout=C_Rstrt}
CarImages_bis()}}

function CarImages_bis(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i].style.left=C_LeftOffset+"px";
CW_I_bis[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg_bis==Car_Image_Sources_bis.length)C_CrImg_bis=0;
if(Car_Direction){
CW_I_bis[C_HalfNo]=CW_I_bis[0];
for(i=0;i<C_HalfNo;i++)CW_I_bis[i]=CW_I_bis[i+1];
CW_I_bis[C_HalfNo-1].src=Car_Image_Sources_bis[C_CrImg_bis];
CW_I_bis[C_HalfNo-1].lnk=Car_Image_Sources_bis[C_CrImg_bis+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I_bis[i]=CW_I_bis[i-1];
CW_I_bis[0]=CW_I_bis[C_HalfNo];
CW_I_bis[0].src=Car_Image_Sources_bis[C_CrImg_bis];
CW_I_bis[0].lnk=Car_Image_Sources_bis[C_CrImg_bis+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg_bis+=2}}
setTimeout("CarImages_bis()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#381f52" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla1</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#E01341" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla2</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel_bis" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>

</body>

</html>
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 16:12
j'ai modifié C_CrImg en C_CrImg_bis dans la deuxiéme fonction
0
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012
1 mars 2012 à 16:17
nooooon :(
j'ai mis en ligne : www.ilovemedia.info/page_carousel_3.html
ça saute tjs dans le 1er défil !!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 16:23
et ça -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>page_carousel</title>
</head>

<body onload="Carousel();Carousel_bis() " bgcolor="white">
<script type="text/javascript">

// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById('Carousel')){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

//ici metre l'url des images du deuxiemme defil
Car_Image_Sources_bis=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I_bis=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef_bis=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf_bis=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img_bis=new Array(Car_Image_Sources_bis.length);
var C_Angle_bis=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg_bis=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel_bis(){
if(document.getElementById('Carousel_bis')){
for(i=0;i<Car_Image_Sources_bis.length;i+=2){
C_Pre_Img_bis[i]=new Image();C_Pre_Img_bis[i].src=Car_Image_Sources_bis[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div_bis=document.getElementById("Carousel_bis");
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i]=document.createElement("img");Car_Div_bis.appendChild(CW_I_bis[i]);
CW_I_bis[i].style.position="absolute";
CW_I_bis[i].style.top=0+"px";
CW_I_bis[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I_bis[i].style.borderStyle="solid";
CW_I_bis[i].style.borderWidth=1+"px";
CW_I_bis[i].style.borderColor=Car_Border_Color}
CW_I_bis[i].src=Car_Image_Sources_bis[2*i];
CW_I_bis[i].lnk=Car_Image_Sources_bis[2*i+1];
CW_I_bis[i].onclick=C_LdLnk;
CW_I_bis[i].onmouseover=C_Stp;
CW_I_bis[i].onmouseout=C_Rstrt}
CarImages_bis()}}

function CarImages_bis(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef_bis[C_CoefOf_bis+i]+C_Angle_bis))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i].style.left=C_LeftOffset+"px";
CW_I_bis[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle_bis+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle_bis<=0)||(!Car_Direction&&C_Angle_bis>=Math.PI/C_HalfNo)){
if(C_CrImg_bis==Car_Image_Sources_bis.length)C_CrImg_bis=0;
if(Car_Direction){
CW_I_bis[C_HalfNo]=CW_I_bis[0];
for(i=0;i<C_HalfNo;i++)CW_I_bis[i]=CW_I_bis[i+1];
CW_I_bis[C_HalfNo-1].src=Car_Image_Sources_bis[C_CrImg_bis];
CW_I_bis[C_HalfNo-1].lnk=Car_Image_Sources_bis[C_CrImg_bis+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I_bis[i]=CW_I_bis[i-1];
CW_I_bis[0]=CW_I_bis[C_HalfNo];
CW_I_bis[0].src=Car_Image_Sources_bis[C_CrImg_bis];
CW_I_bis[0].lnk=Car_Image_Sources_bis[C_CrImg_bis+1]}
C_Angle_bis=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg_bis+=2}}
setTimeout("CarImages_bis()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#381f52" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla1</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#E01341" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla2</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel_bis" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>

</body>

</html>
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 16:24
j'ai claquer des "_bis" un peu partout ! au bout d'un moment ça vas le faire ! =)
0
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012
1 mars 2012 à 16:29
YES !!!
T'es génial... Comme quoi même à partir d'un script pourri on peut tjs y arriver...
Juste pour être un peu moins nulle, t'as fait quoi entre l'avant-dernier dernier script et celui-ci ? Car j'ai la tête prête à exploqer et je n'arrive même plus à voir ce qui a changé ;)
Merci, thanks, dank u, gracie, gracias.... :))))))
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
Modifié par vincent170186 le 1/03/2012 à 16:35
alors j'ai remplacé les c_angle par c_angle bis et c_coef par coef_bis (je pensais que ce n'etait pas utile de le modifier au debut ! mais finalement c'est ça qui faisait que comme on initialisé deux fois les varaible le premier tourné en boucle ! donc en le nomant "_bis" chanque fonction a sa variable... moi y'a quand méme un truc qui me chagrine ! c'est que les 2 s'arrete quand on en survole 1 ... je vais voir !
0
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012
1 mars 2012 à 16:39
oups oui c'est vrai j'avais même pas vu !
mais je suis déjà tellement heureuse...
0
Réponse 6 / 6
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 16:41
et voila !


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>page_carousel</title>
</head>

<body onload="Carousel();Carousel_bis() " bgcolor="white">
<script type="text/javascript">

// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById('Carousel')){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

//ici metre l'url des images du deuxiemme defil
Car_Image_Sources_bis=new Array(
"img1.gif","https://www.linkorthopaedics.com",
"img2.gif","https://www.linkorthopaedics.com",
"img3.gif","https://www.linkorthopaedics.com",
"img4.gif","https://www.linkorthopaedics.com",
"img5.gif","https://www.linkorthopaedics.com",
"img6.gif","https://www.linkorthopaedics.com",
"img7.gif","https://www.linkorthopaedics.com",
"img8.gif","https://www.linkorthopaedics.com",
"img9.gif","https://www.linkorthopaedics.com",
"img10.gif","https://www.linkorthopaedics.com",
"img11.gif","", //this slide isn't linked
"img12.gif","https://www.linkorthopaedics.com" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I_bis=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef_bis=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf_bis=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img_bis=new Array(Car_Image_Sources_bis.length);
var C_Angle_bis=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg_bis=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd_bis=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel_bis(){
if(document.getElementById('Carousel_bis')){
for(i=0;i<Car_Image_Sources_bis.length;i+=2){
C_Pre_Img_bis[i]=new Image();C_Pre_Img_bis[i].src=Car_Image_Sources_bis[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div_bis=document.getElementById("Carousel_bis");
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i]=document.createElement("img");Car_Div_bis.appendChild(CW_I_bis[i]);
CW_I_bis[i].style.position="absolute";
CW_I_bis[i].style.top=0+"px";
CW_I_bis[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I_bis[i].style.borderStyle="solid";
CW_I_bis[i].style.borderWidth=1+"px";
CW_I_bis[i].style.borderColor=Car_Border_Color}
CW_I_bis[i].src=Car_Image_Sources_bis[2*i];
CW_I_bis[i].lnk=Car_Image_Sources_bis[2*i+1];
CW_I_bis[i].onclick=C_LdLnk;
CW_I_bis[i].onmouseover=C_Stp_bis;
CW_I_bis[i].onmouseout=C_Rstrt}
CarImages_bis()}}

function CarImages_bis(){
if(!C_Stppd_bis){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef_bis[C_CoefOf_bis+i]+C_Angle_bis))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I_bis[i].style.left=C_LeftOffset+"px";
CW_I_bis[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle_bis+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle_bis<=0)||(!Car_Direction&&C_Angle_bis>=Math.PI/C_HalfNo)){
if(C_CrImg_bis==Car_Image_Sources_bis.length)C_CrImg_bis=0;
if(Car_Direction){
CW_I_bis[C_HalfNo]=CW_I_bis[0];
for(i=0;i<C_HalfNo;i++)CW_I_bis[i]=CW_I_bis[i+1];
CW_I_bis[C_HalfNo-1].src=Car_Image_Sources_bis[C_CrImg_bis];
CW_I_bis[C_HalfNo-1].lnk=Car_Image_Sources_bis[C_CrImg_bis+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I_bis[i]=CW_I_bis[i-1];
CW_I_bis[0]=CW_I_bis[C_HalfNo];
CW_I_bis[0].src=Car_Image_Sources_bis[C_CrImg_bis];
CW_I_bis[0].lnk=Car_Image_Sources_bis[C_CrImg_bis+1]}
C_Angle_bis=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg_bis+=2}}
setTimeout("CarImages_bis()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false;C_Stppd_bis=false}
function C_Stp_bis(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd_bis=true;}
</script>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#381f52" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla1</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>
<table width="600" align="center" valign="top" border="0" cellspacing="10" cellpadding="5" bgcolor="#E01341" height="270">
<tr align="left" valign="top" height="118">
<td rowspan="2" bgcolor="white" width="126" height="250"></td>
<td bgcolor="white" width="419" height="118" align="center" valign="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">blablabla2</font></td>
</tr>
<tr height="122">
<td bgcolor="white" width="419" height="122" align="center"><div id="Carousel_bis" style=" position: relative; z-index: 4; visibility: visible"><img src="placeholder.gif" width="394" height="102"></div></td>
</tr>
</table>

</body>

</html>
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 16:43
j'ai modifier la lige 127 --> C_Stppd_bis=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

la ligne 152 --> if(!C_Stppd_bis){

les ligne 179 et 180 -->
function C_Rstrt(){C_Stppd=false;C_Stppd_bis=false}
function C_Stp_bis(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd_bis=true;}
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
1 mars 2012 à 16:45
encore une fois il faut dissocier les variable pour dissocier les actions (et une function, bon normalement si tu fais ça proporement t'as pas besoin de dupliquer les fonctions ! mais la j'avoue ! j'ai les yeux qui pique =) donc la flemme de faire ça proprement ! ! )
0
Anna_001 Messages postés 19 Date d'inscription mardi 28 février 2012 Statut Membre Dernière intervention 1 mars 2012
1 mars 2012 à 16:47
Alors là, je dis méga bravo.
En toute honnêteté, je suis même super génée...
Je suis trop nulle en js mais j'avais vraiment besoin de ce code ! Et à part en js, je ne sais pas comment arriver à ce résultat.
Mille mercis à toi ! Je marque en résolu alors !!!
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
Modifié par vincent170186 le 1/03/2012 à 16:56
de rien !
tu n'a pas a étre génée ! (si je le fais c'est que je le veux bien ! =))
pour le js je te conseille de te pencher sur les librairie ma préféré est jquery (et jquery ui pour les effet !) et pour pouvoir codé du js sans t'arracher les cheveux utilise firefox comme navigateur tu a une option "console d'erreur" qui permet de savoir ou ton code deconne (dreamweaver cs5 le fait aussi ! )
sinon tu aurais pu passer par du flash ! il existe des carroussels tout fait ou tu n'as plus qu'a mettre un fichier xml avec les url des images !

voila !

bonne continuation et a +
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
Cheval de Troie JS/Kryptik.I
Eliosis -
Eliosis -

12 réponses
'JS/Agent.TS' Qu'est ce que c'est ?
TheFastBoost -
TheFastBoost -

17 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses