11548 sujets

JavaScript, DOM et API Web HTML5

Slider Jquery et CSS 3

Bonjour,

J'essaye actuellement de réaliser un slider mélangeant le css 3 et jquery.

J'ai réussi a créer mes animation avec css 3, mais je bloque avec le javascript.

J'aimerai savoir ce que je dois utilisé pour par exemple:
enlever une classe a une div et ajouter la classe a la div suivante et ainsi de suite toute les 2 ou 3 secondes ...

Je sais pas si je sus très clair.
Merci d'avance.
Oui c'est pas faux Smiley langue 


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Animation CSS3</title>
	<link rel="stylesheet" href="style.css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

	<div id="animate"></div>
	
	<div id="content">
		<section id="slider">
			<div id="slide">
				<h3> Lorem ipsum dolor sit amet</h3>
				<img src="android1.png" alt="">
			</div>
			<div id="slide">
				<h3> Lorem ipsum 2</h3>
				<img src="android1.png" alt="">
			</div>
			<div id="slide">
				<h3> Lorem ipsum 3</h3>
				<img src="android1.png" alt="">
			</div>
			<div id="slide">
				<h3> Lorem ipsum 4</h3>
				<img src="android1.png" alt="">
			</div>
		</section>

	</div>


</body>
</html>


et le css:
*{margin:0;padding:0;}

#animate{
	width:45px;
	height:45px;
	background:red;
	-webkit-transition-duration: 3s;
	-webkit-transition-property: color, width, height;
}

#animate:hover{
background:yellow;
width:60px;
height:120px;

}
#content{
	width:580px;
	margin:0 auto;
}
#slider h3{
	opacity:0;
	font-size: 24px;
	color:green;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: relative;
	left:630px;
	top: 120px;
	-webkit-transition-duration: 1s;
	-webkit-transition-property: opacity, left;
}

#slider{overflow: hidden;}

#slider img{
	opacity:0;
	position:relative;
	left:-150px;
	-webkit-transition-duration: 1s;
	-webkit-transition-property: opacity, left;
}

 #slider .hover img{opacity:1;left:0;}
 #slider .hover h3{left:300px;opacity:1;}
Sujet clos
Aller à