Jquery : slide effect
Résolu/Fermé
tete0148
Messages postés
413
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
-
11 mai 2013 à 15:38
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 12 mai 2013 à 18:26
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 12 mai 2013 à 18:26
Bonjour, je souhaiterais savoir comment faire un effet de slide ou de déroulement pour des div.
Je voudrais qu' elle puissent glisser de la gauche vers la droite, comme un diaporama.
Je voudrais qu' elle puissent glisser de la gauche vers la droite, comme un diaporama.
2 réponses
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
Modifié par prosthetiks le 11/05/2013 à 16:02
Modifié par prosthetiks le 11/05/2013 à 16:02
Hello,
Voici un exemple, il suffit de cliquer sur l'image pour lancer le défilement:
Voici un exemple, il suffit de cliquer sur l'image pour lancer le défilement:
<html>
<head>
<title></title>
<style type="text/css">
.global{
padding: 10px;
background-color: #ccc;
border-radius: 20px;
margin:0 auto;
width: 600px;
height:400px;
overflow: hidden;
margin-top: 100px;
}
.container{
overflow: hidden;
width: 999999px;
}
img{
cursor: pointer;
}
</style>
</head>
<body>
<div class="global">
<div class="container">
<img src="http://placehold.it/600x400"/>
<img src="http://placehold.it/600x400"/>
<img src="http://placehold.it/600x400"/>
<img src="http://placehold.it/600x400"/>
</div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var slider = {
imgWidth: 600,
currentImg:0,
nbPicts: 0,
_initialize: function(){
this.nbPicts = $('img').length;
this.listeners();
return this;
},
listeners: function(){
var me = this;
$('img').click(me.move);
},
move: function(){
var me = sliderInstance;
if(me.currentImg + 1 < me.nbPicts){
$('.container').animate({'margin-left': - (me.imgWidth * (me.currentImg + 1))}, 1000);
me.currentImg++;
}else{
$('.container').animate({'margin-left': 0}, 1000);
me.currentImg = 0;
}
}
}
var sliderInstance = slider._initialize();
</script>
</html>
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
12 mai 2013 à 12:09
12 mai 2013 à 12:09
Voila avec des divs:
<html>
<head>
<title></title>
<style type="text/css">
.global{
padding: 10px;
background-color: #aaa;
border-radius: 20px;
margin:0 auto;
width: 600px;
height:400px;
overflow: hidden;
margin-top: 100px;
}
.container{
overflow: hidden;
width: 999999px;
height: 400px;
}
.slide{
cursor: pointer;
width: 580px;
padding: 10px;
height: 380px;
float: left;
margin-right:20px;
text-align: justify;
}
img{
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="global">
<div class="container">
<div class="slide">
<p><img src="http://placehold.it/150x300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non enim lorem, ac imperdiet turpis. Donec malesuada tortor sit amet tellus malesuada quis porta enim luctus. Nulla consequat ornare lorem, in sodales tellus accumsan ut. Maecenas euismod feugiat mi, sed facilisis quam venenatis id. Nam nunc metus, malesuada nec ultricies ut, viverra et diam. Aliquam turpis risus, laoreet ac lacinia ut, ultricies non odio. Integer et ligula eu felis mattis facilisis. Sed rutrum pharetra ligula, a sagittis nunc volutpat porttitor. In vestibulum congue leo in ultrices. Pellentesque rhoncus aliquam dui, vel pharetra odio sollicitudin id. Quisque lacus sem, venenatis sit amet commodo vel, dictum nec diam. Mauris vel ante ligula, vitae ultrices lorem.</p>
<p>Mauris auctor leo congue erat cursus vel laoreet diam venenatis. Integer non nisl eros. Proin lacinia iaculis mauris. Phasellus at sapien felis. Mauris tincidunt magna sed massa hendrerit condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec luctus dolor eget justo ultrices in imperdiet turpis rutrum. Fusce et lectus mi.</p>
</div>
<div class="slide">b</div>
<div class="slide">c</div>
<div class="slide">d</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var slider = {
imgWidth: 620,
currentImg:0,
nbPicts: 0,
_initialize: function(){
this.nbDiv = $('.slide').length;
this.listeners();
return this;
},
listeners: function(){
var me = this;
$('div.slide').click(me.move);
},
move: function(){
var me = sliderInstance;
if(me.currentImg + 1 < me.nbDiv){
$('.container').animate({'margin-left': - (me.imgWidth * (me.currentImg + 1))}, 1000);
me.currentImg++;
}else{
$('.container').animate({'margin-left': 0}, 1000);
me.currentImg = 0;
}
}
}
var sliderInstance = slider._initialize();
</script>
</html>
tete0148
Messages postés
413
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
89
12 mai 2013 à 18:18
12 mai 2013 à 18:18
ok merci de ton aide, on peut mettre autant de div qu' on veut ?
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
12 mai 2013 à 18:26
12 mai 2013 à 18:26
Vui!
11 mai 2013 à 16:12
11 mai 2013 à 22:49
12 mai 2013 à 08:50
12 mai 2013 à 09:04
12 mai 2013 à 10:16