Jquery : slide effect
Résolu
tete0148
Messages postés
413
Date d'inscription
Statut
Membre
Dernière intervention
-
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
2 réponses
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>
tete0148
Messages postés
413
Date d'inscription
Statut
Membre
Dernière intervention
89
Et ça marche si je remplace les images par des div
prosthetiks
Messages postés
1189
Date d'inscription
Statut
Membre
Dernière intervention
431
Et si tu testais ? xD
tete0148
Messages postés
413
Date d'inscription
Statut
Membre
Dernière intervention
89
Pas bête
tete0148
Messages postés
413
Date d'inscription
Statut
Membre
Dernière intervention
89
ça marche mais je vois tous les contenus des div dans la premiere et les autres sont vides. Mais le slide fonctionne
prosthetiks
Messages postés
1189
Date d'inscription
Statut
Membre
Dernière intervention
431
Tu peux me montrer ton code actuel ?
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>
