code css html javascript

20 juin 2017 à 15:47:47

Bonjour comment vous vous portez ici

je suis entrain de réaliser un site web. veuillez m'aider pour le code slid .

cela ne marche pas . Je ne sais pas ou j'ai fait l'erreur mais le cassourel ne marche pas du tout cela me fait chier depuis trois jours.

Voici le code html et le script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<img src="image/1.jpg" class="slides" /> 
<img src="image/2.jpg" class="slides"  /> 
<img src="image/3.jpg" class="slides" /> 
<img src="image/4.jpg" class="slides" /> 
<img src="image/5.jpg" class="slides" /> 
<button class="btn"  onclick="plusIndex(-1)" id="btn1">   &#10094; </button>
<button class="btn"  onclick="plusIndex(-1)" id="btn2">   &#10095; </button>

</div> 
</body>
<script> 
var index = 1;
function plusIndex(n){
	index=index+1;
	showImage(index);
	}
showImage(1);
function showImage(n){
	var i;
	var x = document.getElementsByClassName("slides");
	if(n>x.length){ index=1};
	if(n<1){ index=x.length};
	for(i=0;i<x.lenght;i++)
	{
	x[i].style.dispaly="none";	
}
x[index-1].style.dispaly="block";
}
 autoslide();
 function autoslide(){
	var i;
	var x = document.getElementsByClassName("slides");
	for(i=0;i<x.lenght;i++)
	{
	x[i].style.dispaly="none";	
}
if(index > x.length){ index=1}
x[index-1].style.dispaly="block";
index++;
estTimeout(autoslide,2000);
	 }  
</script>
</html>

voici le css

@charset "utf-8";
/* CSS Document */

#container{
	width:80%;
	height:450px;
	border:1px solid black;
	margin:0 auto;
	position:relative;	
	}
#container>img{
	width:100%;
	height:100%:
	position: absolute;	
	}
#container>.btn{
	position:absolute;
	width:50px;
	height:50px;
	border:none;
	border-radius:25px;
	top:10px;
	background:black;
	color:white;
	font-size:20px;
}
#container>#btn2{
	position:relative;
	float:right;
}
#container>#btn1{
	position:relative;
	float:left;
}
#container>#btn1:hover{
	box-shadow:20px 0px 20px 0px black;
}
#container>#btn2:hover{
	box-shadow:-20px 0px 20px 0px black;
}

Merci de m'aider

Schizav

20 juin 2017 à 15:56:07

Hello,

Si je comprends bien, tu t'en vois pour faire bouger sur les côtés et tu as commencer un code en javascript pour créer cette petite animation ?

Le problème en informatique se trouve toujours entre la chaise et le bureau.

darenju

20 juin 2017 à 16:22:43

Il y a plein d'erreurs de frappe dans ton code, relis-toi. Par exemple, dispaly au lieu de display, lenght au lieu de length...

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

Benjamin1206

20 juin 2017 à 16:33:00

Merci mais j'ai toujours pas satisfaction.

Schizav

20 juin 2017 à 16:36:00

Message ignoré, bonne continuation.

Edit : T'es pas au resto' ici

-
Edité par Schizav 20 juin 2017 à 16:36:38

Le problème en informatique se trouve toujours entre la chaise et le bureau.

darenju

20 juin 2017 à 16:58:46

Regarde ta console d'erreurs, elle doit être blindée. Relis ton code, plein de fautes de syntaxe, de frappe, commences par là.

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

Lucky13

20 juin 2017 à 17:01:35

Hello,

je plussoie darenju, commence pas avoir un code valide avant de continuer, sinon ce n'est pas la peine de perdre du temps...

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ChrisLebure

20 juin 2017 à 17:12:34

Bonsoir,

ce slider fonctionne parfaitement, à condition d'écrire partout:

display au lieu de dispaly
x.length au lieu de x.lenght
setTimeOut au lieu de estTimeOut

Les boutons en revanche ... pas vraiment

Benjamin1206

20 juin 2017 à 18:12:43

voici le code html corrigé merci de votre aide mais cela ne marche pas toujours

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<img src="image/1.jpg" class="slides" /> 
<img src="image/2.jpg" class="slides"  /> 
<img src="image/3.jpg" class="slides" /> 
<img src="image/4.jpg" class="slides" /> 
<img src="image/5.jpg" class="slides" /> 
<button class="btn"  onclick="plusIndex(-1)" id="btn1">   &#10094; </button>
<button class="btn"  onclick="plusIndex(-1)" id="btn2">   &#10095; </button>

</div> 
</body>
<script> 
var index = 1;
function plusIndex(n){
	index=index+1;
	showImage(index);
	}
showImage(1);
function showImage(n){
	var i;
	var x = document.getElementsByClassName("slides");
	if(n>x.length){ index=1};
	if(n<1){ index=x.length};
	for(i=0;i<x.length;i++)
	{
	x[i].style.display="none";	
}
x[index-1].style.dispaly="block";
}
 autoslide();
 function autoslide(){
	var i;
	var x = document.getElementsByClassName("slides");
	for(i=0;i<x.length;i++)
	{
	x[i].style.dispaly="none";	
}
if(index > x.length){ index=1}
x[index-1].style.dispaly="block";
index++;
SetTimeOut(autoslide,2000);
	 }  
</script>
</html>

code css

@charset "utf-8";
/* CSS Document */

#container{
    width:80%;
    height:450px;
    border:1px solid black;
    margin:0 auto;
    position:relative;   
    }
#container>img{
    width:100%;
    height:100%:
    position: absolute;   
    }
#container>.btn{
    position:absolute;
    width:50px;
    height:50px;
    border:none;
    border-radius:25px;
    top:200px;
    background:black;
    color:white;
    font-size:20px;
}
#container>#btn2{
    position:relative;
    float:right;
}
#container>#btn1{
    position:relative;
    float:left;
}
#container>#btn1:hover{
    box-shadow:20px 0px 20px 0px black;
}
#container>#btn2:hover{
    box-shadow:-20px 0px 20px 0px black;
}

veuillez bien m'aider maintenant merci à vous

-
Edité par Benjamin1206 20 juin 2017 à 18:16:30

ChrisLebure

20 juin 2017 à 18:50:50

non le code n'est pas corrigé du tout, on voit encore "dispaly" ...

Lucky13

20 juin 2017 à 18:56:40

Il manque aussi l'attribut ALT pour chaque images, tant qu'à faire

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

David Gaulin

20 juin 2017 à 19:10:52

Salut, tu as également écrit SetTimeOut (ligne 50) alors que tu es supposé écrire: setTimeout

En regardant dans la console de ton navigateur tu aurais pu voir et corriger cette erreur!

Apprendre apprendre et... apprendre!

ChrisLebure

20 juin 2017 à 19:12:10

Exact Lucky !

Sinon Benjamin regarde les deux boutons, c'est n'importe quoi, ils ont même effet, même fonction même paramètre

David Gaulin

20 juin 2017 à 19:20:57

Sinon Benjamin j'ai une question; est-ce ton code? Je dis cela, car pas mal tous les noms de fonctions, de variables, etc. sont écrient en anglais..

Si ce n'est pas le tien, je te conseillerais au moins de trouver un autre code ^^.Sinon, à l'avenir au lieu de tout écrire ton code puis de compiler, tu devrais écrire fonction par fonction et faire des petits tests à chaque fois. Ainsi, tu t'assurerais au fur et à mesure que tu avances que ton code marche et correspond à ce que tu veux.. Bref, ce ne sont que des conseils!

-
Edité par David Gaulin 20 juin 2017 à 19:22:10

Apprendre apprendre et... apprendre!

Benjamin1206

20 juin 2017 à 22:57:34

Merci pour votre contribution

j'ai pri en compte toutes v

les corrections mais le slid ne fonctionne pas toujours. Si quelqu'un peut m'aider avec un autre code car j'en ai besoin merci.

En ce qui concerne ceci j'attends toujours vos apports de solution svp

Lucky13

20 juin 2017 à 23:05:16

Je ne vois quel type de slider tu recherches, tu as des exemples avec leur code sur codepen

Peut-être y trouveras tu celui qui te convient -> https://codepen.io/tag/slider/

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

NicolasDreux

21 juin 2017 à 0:10:55

je crois qu'il te faut revoir d'abord les bases du CSS est du HTML.

surtout que c'est les langages les plus facile a à prendre en programmation Web.

Schizav

21 juin 2017 à 8:35:05

Utilise Bootstrap, y'a un caroussel génial pour ceux qui ont la flemme de tout faire (je ne cache pas que je l'utilise, c'est beau en plus).

Le problème en informatique se trouve toujours entre la chaise et le bureau.

Benjamin1206

22 juin 2017 à 22:23:13

Bonsoir les amis je vous remercie pour votre participation mais j'ai pas obtenu ce que je veux si quelqu'un peut quil me donne un code dont le width serait au moins a 1000 px merci d'avance